Question

我创建了一个脚本，它向服务器发出请求并获取一个json响应，其中包含一些用于创建下拉列表的数据，在某些情况下，服务器返回一个值，当然，生成的下拉列表只有一个选项（如下）

<div id="wrap">
    <select class="click_me">
        <option value="1">foo</option> --> this value comes from a json response.
    </select>
</div>

这是我的jQuery脚本（我认为它是自我解释的）

$('#wrap').on('change', 'select', function() {

    var container = $('#wrap');
    var self = $(this);
    self.nextAll().remove();

    $.ajax({
      type: 'GET',
      url: 'server/stuff?id=' + self.val(),
      dataType: 'json',
      success: function(data) {
        if (data) {
          var options = self.clone().empty().appendTo(container); //clone current dropdown.
          $.each(data, function(key, value) {
            $.each(value, function(key, value) {
              options.append($("<option />").val(key).text(value)); //fill cloned element with new data
            });
          });
        } else {
          console.log('Nothing more');
        }
      }
    });


  });

如果用户使用一个选项获得下拉列表，则上述脚本不起作用。我认为onchange事件根本没有被触发，我尝试了onclick事件但是当用户只想打开下拉列表时它会激活。

请，任何建议都表示赞赏。

由于

Answer 1

您可以采用以下方式解决此问题。单击选择列表时，如果它只有一个选项，我们可以通过自己调用change事件。所以试试

$('#wrap').on('change', 'select', function() {
  //your stuff 
}).click(function(){
   if($('#wrap select option').length == 1) {
    $('#wrap select').change();
  }
});

工作小提琴是here。通过在下拉列表中添加更多选项来测试它，以确保它也适用于多个选项。

Answer 2

在您json response之后进行检查：

if($('#wrap .click_me option').length == 1) {
    $('#wrap .click_me').change();
}

Answer 3

尝试，

$("dropdownId").blur(function(){
// here goes your code
}

点击事件onChange on dropdown有一个选项

3 个答案: