如何使用jQuery设置HTML中的下拉框文本？

Question

我找到了更多关于这个问题的例子，但是当我尝试时，它并没有起作用。

$(window).load(function () {
$("#country").html('Please select in here');
});

<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>

请查看并告诉我“为什么它不起作用？”。谢谢大家。

- Brian Crist

---

Uncaught ReferenceError: $ is not defined - Ram

亲爱的@Vohuman，我不明白，请详细说明一下。我想要的是，在加载时，选择文本为：“请在此处选择”，例如$("#country").html('请在此处选择');。 - Brian Crist

你没有包含jQuery脚本。 - guradio

亲爱的@Heyyou，没有文本框吗？ - Brian Crist

@BrianCrist 我看到一条评论说 $ 未定义，然后其他某个函数正在使用 $。 - guradio

Answer 1

把 <select id="country"> 和 </select> 之间的整个内容替换成 'Please select in here' 是不切实际的吗？如果你只想替换第一个选项的内容，那么可以尝试这样做。

$(window).load(function () {  
  //$("#country").html('Please select in here');
});

$(document).ready(function() {
  //$("#country").html('Please select in here');
  $("#country").find("option:first-child").html('Please select in here');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>

- U K A

---

亲爱的 @UKA ，看起来很不错。 - Brian Crist

Answer 2

如果您想添加另一个选项，只需将新选项附加/前置到选择器中，如下所示：

$(window).load(function () {
$("#country").prepend('<option value="" selected>Please select in here</option>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>

- Norlihazmey Ghazali

---

嗯，对我来说它是有效的。当加载时，我们使用prepend，就像@Norlihazmey Ghazali所说的那样。 - Brian Crist

Answer 3

Please select in here:
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>

你不能在选择框中添加文本，你需要在它前面添加。

如果你真的想在加载后添加文本，在选择框前再添加一个 div 控制。

- Shel Yang

Answer 4

我有点困惑你想要实现什么

在前面添加

$('#country').prepend('<option>Please select in here</option>');

动态选择：

要动态选择：

$('#country').val("None")

添加新选项：

$('#country').append(new Option('Foo', true));

- 10K35H 5H4KY4

Answer 5

我不是完全确定你想做什么，但如果你只想更改默认文本，那么你可能正在寻找类似于这样的东西：

<select id="country">
    <option value="None" selected>Please select in here</option> <!-- set the default selection -->
    <option value="China">China</option>
    <option value="United State">United State</option>
    <option value="Malaysia">Malaysia</option>
</select>

然后设置新值的JS代码将是：

$(window).load(function () {
    $("#country").val('China');
});

- Jared S.