使用Jquery从一个Select框自动跳转到另一个框

时间:2013-05-03 10:46:47

标签: jquery html

我有两个选择框如下。

<select name="origin" id="s1" class="editable-select" style="width:330px;height:40px;">
  <option value=""></option>
  <option value="Bangalore">Bangalore (BLR)</option>
  <option value="Chennai">Chennai (MAA)</option>
  <option value="Goa">Goa (GOI)</option>
  <option value="Hyderabad">Hyderabad (HYD)</option>
  <option value="Kolkata">Kolkata (CCU)</option>
  <option value="Mumbai">Mumbai (BOM)</option>
  <option value="New Delhi">New Delhi (DEL)</option>
  <option value="Pune">Pune (PNQ)</option>
</select>


<select id="s2" class="editable-select" style="width:330px;height:40px;" name="destination">
  <option value=""></option>
  <option value="Bangalore">Bangalore (BLR)</option>
  <option value="Chennai">Chennai (MAA)</option>
  <option value="Goa">Goa (GOI)</option>
  <option value="Hyderabad">Hyderabad (HYD)</option>
  <option value="Kolkata">Kolkata (CCU)</option>
  <option value="Mumbai">Mumbai (BOM)</option>
  <option value="New Delhi">New Delhi (DEL)</option>
  <option value="Pune">Pune (PNQ)</option>
</select>

现在,如果我在选择框“s1”中选择或更改选项。然后Focus应该在选择框“s2”上,它应该自动打开。

我尝试过使用onChange和onFocus函数。然后onChange“S1”中的任何选项焦点都跳到“S2”,但下拉列表没有打开。请仔细阅读这个jsfiddle链接:http://jsfiddle.net/eQxAj

提前致谢, 了Shoba

2 个答案:

答案 0 :(得分:0)

无法使用JavaScript打开Select Box

答案 1 :(得分:0)

我认为有一种方法可以使用jQuery以程序方式打开一个选择菜单,但这可能是您的替代选择:

$('#s1').change(function() {
    $('#s2').focus();
    $('#s2').attr('size',9);
});

$('#s2').change(function() {
    $('#s2').attr('size',1);
});

$('#s2').focusout(function() {
    $('#s2').attr('size',1);
});

我在选择中取出了内联样式,以便更容易看到效果。

http://jsfiddle.net/9eJUz/