填充动态下拉列表时遇到错误

时间:2014-01-11 11:39:11

标签: javascript jquery drop-down-menu

尝试动态地在现有<option>中添加一些<select>,但面临错误"An attempt was made to reference a Node in a context where it does not exist."我试图解决它失败...

HTML code:

<label class="control-label" for="selectError">Ayat/Hadith no.:</label>
   <div class="controls">
      <select id="ayat_selector"  disabled >
          <option id="all_ayat" selected>All </option>                                  
      </select>
  </div>

javascript:

var selectHTML = "<option id='200'>Select Surah</option>";
        alert("ajax going ");
        $.ajax({
            url: "../Surah_CRUD/Load_Surahs",
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            data: '',
            success: function (result) {
                var mera_obj = result.key;
                for (var i = 0; i < 5; i++) {
                    selectHTML += "<option id='" + i + "'>" + mera_obj[i].Surah_Description + "</option>";
                }
                var qa = document.getElementById('ayat_selector');
                qa.appendChild(selectHTML);
                alert("done"+qa.className);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("3>  " + thrownError);
            },
        });

1 个答案:

答案 0 :(得分:2)

问题是你试图通过不存在的id来选择元素 试着改变这个:

var qa = document.getElementById('surah_selector');

到此:

var qa = document.getElementById('ayat_selector');

<强>更新

尝试更改此

var qa = document.getElementById('ayat_selector');
qa.appendChild(selectHTML);
alert("done"+qa.className);

在jQuery中使用此代码:

$('#ayat_selector').append(selectHTML);
alert('done');