Question

我有一个使用jquery填充了Ajax的select元素：

Javascript：

oCssSet = document.getElementById("sel_opt");    

$.each(data, function (index) {
            var opt = document.createElement("option");
            opt.value = data[index].selID;
            opt.innerHTML = data[index].selDescr;

            oCssSet.appendChild(opt);

        });

HTML：

<select class="form-control" onChange="AddOptions(this);" id="sel_opt" disabled></select>

所有操作都完成了，但是当只有一个值并且我单击它时，我的函数无法启动，我需要在我的顶部选择一个空白行，怎么可能？

预先感谢

Answer 1

将其静态添加到您的html中：

<select class="form-control" onChange="AddOptions(this);" id="sel_opt" disabled>
<option value="">Please select</option>
</select>

Answer 2

如果只有一个，则将其选中：）

id  Value
12  780
123 796
124  790

function AddOptions() {
  var val = this.value;
  if (this.type=="checkbox" && !this.checked) val="";
  console.log(val);
  
}
var data = [{
  selId: "option1",
  selDesc: "Option 1"
}]
/*
,{
  selId: "option2",
  selDesc: "Option 2"
}*/

$(function() {
  if (data.length == 1) {
    var html = "<label>" + data[0].selDesc +
      "<input type='checkbox' value='" + data[0].selId + "' id='sel_opt' /></label>";
    $("#sel_opt").replaceWith(html)
  } else {
    $.each(data, function(_, item) {
      var $opt = $("<option/>", {
        value: item.selId,
        text: item.selDesc
      });
      $("#sel_opt").append($opt);
    });
  }
  $("#sel_opt").on("change",AddOptions);
});

jQuery在选择元素上添加空白行

2 个答案: