2016-12-20 2 views
1

Страница имеет поле ввода, которое изменяет поведение в зависимости от выпадающего значения.проверить выпадающее значение, если внутри массива

<div class="form-group"> 
      <label for="exampleInputEmail2">Element Name</label> 
      <select class="form-control" name="element_id" id="element_name"> 
      @foreach($elements as $element) 
       <option value="{{ $element->element_id }}">{{ $element->element_name }}</option> 
      @endforeach 
      </select> 
</div> 
<div class="form-group"> 
      <label for="exampleInputName2">Element Value</label> 
      <input type="text" class="form-control" id="element_value" name="value" placeholder="Add an Element Value"> 
</div> 

Сценарий У меня есть ниже:

<script type="text/javascript"> 
    <?php 
    echo "var javascript_array = ". $list . ";\n"; 
    ?> 
    $("#element_name").on('change', function(){ 
     var id_input = $('#element_name').val(); 
     if(id_input == 2){ 
      $("#element_value").datepicker(); 
     } 
     else if(jQuery.inArray(id_input, javascript_array)!='-1'){ 
      $("#element_value").datepicker('destroy'); 
       $(function() { 
         $("#element_value").autocomplete({ 
         scroll: true, 
         autoFocus: true, 
         minLength: 3, 
         source: function(request, response) { 
          $.ajax({ 
          url: "/employees/public/admin_list/search", 
          dataType: "json", 
          data: { 
           searchText: request.term 


       }, 
         success: function(data) { 
         response($.map(data, function(item) { 
           return { 
            label: item.name, 
            value: item.id 
           }; 
          })); 
         } 
         }); 
        }, 
        select: function(event, ui) { 
         $(this).val(ui.item.label); 
         return false; 
        } 
       }); 
       }); 
    } 
    else { 
     $('#element_value').datepicker('destroy'); 
    } 
}); 
</script> 

Так в основном, если значение раскрывающийся 2 (День рождения), поле изменения DatePicker (который работает), к сожалению, часть где 'else if (jQuery.inArray (id_input, javascript_array)! =' - 1 ')', похоже, не работает, так как он не меняет вход на вход поиска. (Если я жестко привязываю его к 'else if ((id_input == 1) || (id_input == 4) || (id_input == 5))' он всегда работает, но эти идентификаторы списка будут увеличиваться по мере того, как пользователи создадут их в будущее, поэтому я должен хранить их в javascript_array и просто искать оттуда).

Что мне не хватает?

массив показан как var javascript_array = [1,4,5];

генерируется из контроллера, как показано ниже:

$lists = Elements::select('element_id')->where('is_list', 1)->get(); 
      foreach ($lists as $r){ 
      $list_temp[] = $r->element_id; 
      } 
$list = json_encode($list_temp); 
+0

показать рендер. – BenG

+0

Имейте в виду, что это ваша проблема. Http://stackoverflow.com/questions/1071441/jquery-inarray-is-always-returning-1 – BenG

+0

Можете ли вы рассказать нам, что такое '' 'javascript_array'''? – CUGreen

ответ

1

этот вопрос jQuery.inArray должен быть принят правильный type.

$('#element_name').val() бы установить id_input как строку: -

var id_input = "4"; 
 
var javascript_array = [1,4,5] 
 

 
var stringType = jQuery.inArray(id_input, javascript_array); 
 

 
console.log(stringType); // -1 
 

 
var intType = jQuery.inArray(parseInt(id_input), javascript_array); 
 

 
console.log(intType); // 1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

так что вам нужен parseInt значения выпадающего.

+0

Это ответ .. благодаря!! :) .. всегда задавался вопросом, является ли тип неправильным – Odinovsky

0

поле ввода, которое изменяет поведение в зависимости от значения выпадающего.

Если я правильно понял, то вы можете добиться этого в одной строке функции JQuery:

$(document).ready(function(){ 
 

 
    $('select').change(function(){ 
 
    $('input').attr('type', $('option:selected').val()); 
 
    }) 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select> 
 
<option value="text">Text Input</option> 
 
<option value="button">Button Input</option> 
 
<option value="date">Date Input</option> 
 
<option value="checkbox">Checkbox Input</option> 
 
<option value="radio">Radio Input</option> 
 
</select> 
 

 
<input type="text" />

Смежные вопросы