jquery - 如何动态填充下拉/选择/组合框？答案

【问题标题】：jquery - How to populate dropdown/select/combobox dynamically?jquery - 如何动态填充下拉/选择/组合框？
【发布时间】：2014-01-19 00:42:06
【问题描述】：

我正在尝试在 div 中动态添加下拉菜单[jQuery]，但它不起作用。我想要以下结构：

<select id="surah_selection" style="position:relative; top:10px; left:25px"> 
      <option id="1">Select Surah</option> 
      <option id="2" >Al-Baqra</option>
      <option id="3">Al-Fatiha</option>
      <option id="4">Al-noor</option>
      <option id="5">Al-Tobah</option>
</select>  <!--Surah selection ends -->

我已经阅读了this，但它没有用。

这是我尝试过的：

$('#book_selection').change(function(){
    alert("changed");
    var option = document.createElement("option");
    option.text = 'df';
    option.value = 'df';
    var temp = document.createElement('select');
    temp.appendChild(option);
    var root = document.getElementById('book_selection');
    root.appendChild(temp);
    alert("done");
});

【问题讨论】：

光看还不够，实现就好。
在这里查看完整解释的解决方案stackoverflow.com/questions/20857764/… 也许它会对您有很大帮助。
当你说“它不起作用”时，你需要更准确，因为我们很难理解这个问题
@MysticMagic 我更新了代码..

标签： javascript jquery drop-down-menu

【解决方案1】：

检查下面的小提琴。这将对您有所帮助。根据您的需要更改它们。

$('#book_selection').change(function(){
    var newSelect=document.createElement('select');
    var selectHTML="";
    for(i=0; i<choices.length; i=i+1){
        selectHTML+= "<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    }

    newSelect.innerHTML= selectHTML;
    document.getElementById('book_selection').appendChild(newSelect);
});

$(document).ready(function(){
var newSelect=document.createElement('select');
    var selectHTML="";
   /* for(i=0; i<choices.length; i=i+1){
        selectHTML+= "<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    }*/
    selectHTML+= "<option value='test'>test</option>";

    newSelect.innerHTML= selectHTML;
    document.getElementById('book_selection').appendChild(newSelect);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="book_selection"></div>

你也可以使用jquery

$('#book_selection').change(function() {
    $("<select />").append($("<option>", {"value": "me", "text": "me"})).insertAfter($(this));
});

【讨论】：

【解决方案2】：

我假设您的 HTML 中某处有一个空的 <div>，并且您想将该选择插入其中，例如：

<div class="surah_selection></div>

然后要将您的选择插入到 div 中，您可以这样做：

var selectSurah = '<select id="surah_selection" style="position:relative; top:10px; left:25px"><option id="1">Select Surah</option><option id="2" >Al-Baqra</option><option id="3">Al-Fatiha</option><option id="4">Al-noor</option><option id="5">Al-Tobah</option></select>';
$(".surah_selection").prepend(selectSurah);

您可以在这里查看小提琴：Fiddle

【讨论】：

【解决方案3】：

试试这个

<select id="surah_selection" style="position:relative; top:10px; left:25px"> 
        <option id="1">Select Surah</option> 
        <option id="2" >Al-Baqra</option>
        <option id="3">Al-Fatiha</option>
        <option id="4">Al-noor</option>        
    </select>

要向组合框添加新选项，您可以尝试以下 jQuery

<script>
function add(){
        var str="<option id='5'>Al-Tobah</option>"
        $("#surah_selection").append(str);
    }
</script>

通过调用此函数，一个新选项将添加到您的组合框

【讨论】：