HTML 表单中心下拉列表选择 where selected = “selected” using jQuery

Question

我有一个包含下拉列表的 HTML 表单。

我希望列表在选中的位置居中。该表格已被硬编码以使其易于遵循。

    <select id="primary_cat_select" name="primary_cat" size="9" style="width: 400px;">
 <option value="01">001</option>
    <option value="02">002</option>
    <option value="03">003</option>
    <option value="04">004</option>
    <option value="05">005</option>
    <option value="06">006</option>
    <option value="07">007</option>
    <option value="08">008</option>
    <option value="09">009</option>
    <option value="10">010</option>
    <option value="11 selected="selected"">011</option>
    <option value="12">012</option>
    <option value="13">013</option>
    <option value="14">014</option>
    <option value="15">015</option>
    <option value="16">016</option>
    <option value="17">017</option>
    <option value="18">018</option>
    <option value="19">019</option>
    <option value="20">020</option>
    <option value="21">021</option>
    <option value="22">022</option>
    <option value="23">023</option>
    <option value="24">024</option>
    </select>

我有一个jQuery代码如下：

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script type="text/javascript" >
 $(function(){

  var form1 = $('#form1'), 
      form2 = $('#form2');  
  //  $(document).ready(function() {
  $(document).change(function(){
    $(':input[name]', form2).val(function(){
      return $(':input[name='+ this.name +']', form1).val();
    });
  });

});
    </script>

我想修改上面的 jQuery 代码以将选择居中，在这种情况下，selected="selected" 位于选项 11，即 011

我想像 http://jsfiddle.net/BA39h/1/ 那样将选区居中我不知道该怎么做。

Answer 1

您可以将脚本包装在一个函数中并在页面加载时调用它。只需使用 setTimeout 来确保它在页面加载后被触发：

var start = $("#listF");

setTimeout(function(){
  centerSelect(start);
},1);


$('#listF').on('change', function(){
    centerSelect($(this));
});


function centerSelect(optionChosen){
    strip = optionChosen[0];
     var n = strip.getAttribute('size'),
        i = strip.selectedIndex,
        l = strip.length;
    strip.selectedIndex = Math.min(l-1,i+n/2|0);
    strip.selectedIndex = Math.max(0,i+1-n/2|0);
    strip.selectedIndex = i;
}

FIDDLE

更新

对于多个 select 字段，您可以使用 .each() 函数循环遍历它们和运行函数：

$("select").each(function(){
   var start = this;

   setTimeout(function(){
     centerSelect(start);
   },1);

});

NEW FIDDLE

HTML 表单中心下拉列表选择 where selected = “selected” using jQuery

HTML form center drop down list selection where selected = “selected” using jQuery

html

forms

jquery