1

我有两个选择框，如下所示。

<select class="box1">

  <option>1</option>
  <option>2</option>
  <option>3</option>

</select>

<select class="box2">

  <option>1</option>
  <option>2</option>
  <option>3</option>

</select>

现在，在选择框 1 中选择任何项目后，选择框 2 应该会自动打开。

我的代码如下。

<html>
<head>

  <link rel="stylesheet" type="text/css" href="jquery.editable-select.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.editable-select.pack.js"></script>

  <script type="text/javascript">
  $(function() {
    $('.editable-select').editableSelect(
      {
        bg_iframe: true,
        onSelect: function(list_item) {
          $('#results').html('List item text: '+ list_item.text() +'<br> \
          Input value: '+ this.text.val());
        }
      }
    );
    var select = $('.editable-select:first');
    var instances = select.editableSelectInstances();
    instances[0].addOption('Germany, value added programmatically');
  });
  if(!window.console || !window.console.log || !$.browser.mozilla) {
    window.console = {};
    window.console.log = function(str) { $('#debug').show().val($('#debug').val() + str +'\n'); };
  }
  var hidden_offset;
  function moveHidden() {
    var hidden = $('#hidden');
    hidden.show();
    $('#toggle_hidden').val('Hide');
    if(!hidden_offset) {
      hidden_offset = hidden.offset();
      hidden
        .css('position', 'absolute')
        .css('top', hidden_offset.top)
        .css('left', hidden_offset.left)
        .animate({top: 100, left: 400})
      ;
    } else {
      hidden.animate({top: hidden_offset.top, left: hidden_offset.left}, function() {
        hidden.css('position', 'static');
        hidden_offset = null;
      });
    }
  }
  function toggleHidden(btn) {
    var hidden = $('#hidden');
    if($('#hidden').is(':visible')) {
      hidden.hide();
      $(btn).val('Display');
    } else {
      hidden.show();
      $(btn).val('Hide');
    }
  }

  $(document).ready(function(){
  $("#country1").change(function(){
    $("#country").focus();
  });
    });
  </script>

  <style type="text/css">
  .example .example-select {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #CCC;
  }
  .example p {
    margin: 0;
    padding: 0;
  }
  .last {
    margin-bottom: 10px;
  }
  #comment-form {
    width: 100%;
  }
  </style>


</head>
<body>
  <div id="container">

<form name="form">
        <select name="country" id="country1" class="editable-select">
          <option>Denmark</option>
          <option selected="selected">Sweden, selected</option>
          <option>Norway</option>

          <option>Finland</option>
          <option>Iceland</option>
        </select>


       <select name="state" id="country" class="editable-select" style="width:200px;">
          <option>Denmark</option>

          <option>Norway</option>

          <option>Finland</option>
          <option>Iceland</option>
        </select>
</form>


</body>
</html>

我使用过 onChage 和 onFocus 函数。但我没有得到结果。

4

2 回答 2

0

div 标签<div id="container">没有结束标签。

编码：

$(document).ready(function(){
      $("#country1").change(function(){
        $("#country").focus();
          });
    });

应该在jsFiddle上正确测试它。

于 2013-05-02T20:21:36.280 回答
0

由于浏览器限制，您无法在没有用户交互的情况下打开 html 选择框。

要模仿这种行为，您需要使用基于 javascript 的选择替换，例如 select2。

于 2013-05-02T20:29:44.043 回答