Question

我正在尝试使用jQuery动态地在选择列表中附加一个选项：

let text1 = "jg";
console.log("length of text: " + text1.length);
$("#selectList").append($('<option>', {
    value: 12,
    text: text1
}));

这次它给出了文本的长度：7

现在我想从选择列表中检索所选文本，但是当我这样做时，我得到的文本中间只有一个空白区域，其间的空白区域被截断。我用来从下面粘贴的选择列表中检索值的代码：

let e = document.getElementById("selectList");
let selected = e.options[e.selectedIndex].text;
console.log("text: " + selected);
console.log("selected length: " + selected.length);

现在，文字只是j，g和selected length: 3。如何从选择列表中获取上述7长篇文本？

Answer 1

您需要使用innerHTML代替text：

＆＃13;

let text1 = 'j     g';
console.log("length of text: " + text1.length);
$("#selectList").append($('<option>', {
    value: 12,
    text: text1
}));

let e = document.getElementById("selectList");
let selected = e.options[e.selectedIndex].innerHTML;
console.log("text: " + selected);
console.log("selected length: " + selected.length);

＆＃13;

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

＆＃13;

您甚至可以使用innerText代替text：

＆＃13;

let text1 = 'j     g';
console.log("length of text: " + text1.length);
$("#selectList").append($('<option>', {
    value: 12,
    text: text1
}));

let e = document.getElementById("selectList");
let selected = e.options[e.selectedIndex].innerText;
console.log("text: " + selected);
console.log("selected length: " + selected.length);

＆＃13;

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

＆＃13;

Answer 2

您可以使用.textContent的{{1}} DOM属性，并且您将避免在将文本解析为HTML时自然发生的空白规范化。

但是，既然你正在使用JQuery，那么在你已经使用jQuery时混合和匹配vanilla DOM API是没有意义的。

使用jQuery，您可以使用元素的select方法获得相同的结果。

＆＃13;

.text()

＆＃13;

let text1 = "j     g";
console.log("length of text: " + text1.length);

let $list = $("#selectList");
$list.append($('<option>', {
  value: 12,
  text: text1
}));

console.log("text: " + $list.text());
console.log("selected length: " + $list.text().length);

＆＃13;

JQuery附加一个下拉选项，将空格减少为一个

2 个答案: