Question

我有两个选择框如下。

<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函数。但我没有得到结果。

Answer 1

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

代码：

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

应该可以在jsFiddle上正确测试。

Answer 2

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

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

如何使用jquery跳转到选择方框1的选择框2

2 个答案: