如何在select中添加选项以及如何防止select标记的click事件使下拉框消失

Question

就我而言，我需要在单击<select>时在<select>添加选项

现在我有这样的<select>

<select class="form-control" name="commentid" id="">
    <option value="">select</option>
</select>

和这样的js代码

$("select[name=commentid]").click(function(){
    $.get(
        "url",
        function(data){
            $("select[name=commentid] option:not(:eq(0))").remove();
            $.each(data, function(k, v){
                $("select[name=commentid]").append($("<option></option>").attr("vlaue", v.id).text(v.name))
            })
        }, "json"
    )
})

单击“选择”时更新了选项，但下拉框也消失了

我发现append()使下拉菜单消失了，但是我不知道如何解决

Answer 1

尝试这个。

  $(document).ready(function () { $("select[name=commentid]").click(function () { var myOptions = [ { 'val': "Value 1", 'text': "Text 1" }, { 'val': "Value 2", 'text': "Text 2" }, { 'val': "Value 3", 'text': "Text 3" } ]; $(myOptions).each(function (idx, obj) { //console.log(idx); //console.log(obj.text); $('#commentid').append($('<option>', { value: obj.val, text: obj.text })); }); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <select class="form-control" name="commentid" id="commentid"> <option value="">select</option> </select> </div> 

Answer 2

你不能 您仅使用多个属性进行选择，但未显示下拉按钮。 我建议您选择selectpicker以解决您的问题。 在这里阅读示例

Answer 3

我想您在这里要做的就是在select控件的click事件上更新select控件的选项。

因此，发生的事情是，无论何时单击选择控件（选择控件中的选项或控件本身），所选的值都不会显示在单击上（我认为您认为已消失）。

背后的原因是你的click功能，你已经绑定的click上，因为这的选择控制（父）和函数event bubbling正在发生的事情被解雇了父click从孩子的事件。

因此，如果您在select控件中单击选项，它仍将调用父click函数，因为子项是父级作用域的一部分，因此，您将始终看到默认选项（就像在函数中一样，创建用于选择的选项），您将无法看到所选的选项。 因此，更好的方法是从其他事件中调用select option populate function ，而不是从自身进行调用。 如果碰巧发生另一个事件，请更改特定的选择框，这将是更好的方法。

Answer 4

尝试这个

 $(function(){ $("select[name=commentid]").click(function(e){ if($(this).children('option').length <= 1){ $.getJSON( "//www.json-generator.com/api/json/get/bUHzakaaDC", function(data){ $.each(data, function(k,v){ $('select[name=commentid]').append($('<option>', { value: v.id, text : v.name })); }); }); } }); }); 

 select{border: 1px solid #999; padding: 5px; width:125px} 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <select class="form-control" name="commentid" id=""> <option value="">select</option> </select>