Question

我试图创建一个字符串变量，用jquery附加到多选中。

这是小提琴示例：https://jsfiddle.net/o2gxgz9r/47084/

＆＃13;

$(document).ready(function() {
  var group = "<optgroup></optgroup>";

  $(group).attr("value", 1);
  $(group).attr("label", "test group");

  var t = "<option></option>";

  $(t).attr("value", 4);
  $(t).text("Test option");
  $(t).attr("selected", true);

  $(group).append(t);


  $("#a").html(group);
});

＆＃13;

body {
  padding: 5px;
}

label {
  font-weight: bold;
}

input[type=text] {
  width: 20em
}

p {
  margin: 1em 0 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
RESULT TEST PURPOSE:
<br><br>
EXPECTED:
<br>
<textarea rows="5" cols="72">
<optgroup value="1" label="test group">
  <option value="4" selected>Test option</option>
</optgroup>"
</textarea>
<br><br>
GET:
<br>
<label id="a"></label>

＆＃13;

下一步是将使用

选择的字符串附加在选择中

$("#select").append(group);

但是没有创建字符串...结果为空

Answer 1

这里有一些问题。首先，您尝试将optgroup元素附加到label。这是不可能的，因为optgroup只能是select元素的子元素。

其次，optgroup元素没有value属性。

最后，您反复为group和t创建新的jQuery对象，这意味着之前的所有修改都将丢失。要解决此问题，请创建一次jQuery对象，并将它们存储在变量中，然后可以在需要进行更改时引用这些变量。试试这个：

＆＃13;

$(document).ready(function() {
  var $group = $('<optgroup></optgroup>');
  $group.prop("label", "test group");

  var $t = $('<option></option>');
  $t.val(4);
  $t.prop("selected", true);
  $t.text("Test option");
  $group.append($t);
  
  $("#a").html($group);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="a"></select>

＆＃13;

请注意使用val()设置value属性，并尽可能使用prop()而不是attr()。

Answer 2

有几个问题：

var group = "<optgroup></optgroup>";
$(group).attr("value", 1);

您错误地引用了JQuery元素。 $()内的内容需要是表示元素，类或id的字符串。因此，如果您想要更改所有现有的optgroup，它应如下所示：

var group = "optgroup";
$(group).attr("value", 1);

但是，根据您的其他代码，似乎不是您的意图。如果您想要创建新的optgroup，那么您需要引用DOM中已有的元素来添加它（即您的#select）。

其次，您的optgroup元素不能包含值，即HTML无效。 optgroup是一个不可选择的标签＆＃34;这有助于打破下拉列表中的选项。

第三，您错误地创建了<option>元素。如前所述，您无法使用元素的打开/关闭字符串创建JQuery元素。你最好做这样的事情：

var t = "<option value='4' selected='selected'>Test option</option>";
$(group).append(t);

所以你的代码应该看起来像这样：

var group = "<optgroup label='test group'>";
group += "<option value='4' selected='selected'>Test option</option>";
group += "</optgroup>";
$("#select").append(group);

如果您至少拥有JQuery 1.8，则可以将其更改为：

＆＃13;

var group = $( "<optgroup/>", { "label" : "test group"});
var option = $( "<option/>", { text : "Test option", "value" : 4, "selected" : "selected" });
group.appendTo( "#select" );
option.appendTo(group);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="select"></select>

＆＃13;

在jquery中创建一个包含optgroup和option的字符串

2 个答案: