Question

页面处理的输入字段会根据下拉列值更改行为。

<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))它总是有效，但是这个列表ID会随着用户将来创建它们而增加，所以我必须将它们存储在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);

Answer 1

一个输入字段，根据下拉列值更改行为。

如果我理解正确，那么你可以在单行jQuery函数中实现这一点：

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 2

问题是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下拉值。

使用jQuery.inArray检查数组内的下拉值

2 个答案: