如何设置下拉框选中的值

Question

我有一个输入字段，它的宽度是可变的，可以是小号（small）、大号（large）或中号（medium）。我已经对其进行了 CSS 样式设置。

例子：

case 1: <input type="text" id="a1" class="title small required" />
case 2: <input type="text" id="a1" class="title medium" />
case 3: <input type="text" id="a1" class="title large required" />

同时我有一个 select 框：

<select id="b1">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select>

现在我需要检查字段是否具有或或类，并设置相关的框为"selected"。在jQuery中，我直接将选定的值设置为"medium"，但下拉菜单仍显示"small"。如何使用hasClass()函数检查字段是否具有这些类之一？我们能够逐个检查吗？

- kamala

---

在jQuery中，如何检查输入字段是否具有以下三个类之一：“small”、“medium”或“large”？使用hasClass()函数，我们只能一次检查一个。 - kamala

Answer 1

使用这个

$('#b1').val("small"); // to set small as selected

$('#b1').val("medium");

$('#b1').val("large");

使用.hasClass()来完成下一个任务。

var size = $("#al").hasClass('small')? 'small':
  ($("#a1").hasClass('medium')? 'medium' :
  ($("#a1").hasClass('large')? large :' null')); 
alert(size);

- Parthi04

Answer 2

首先，id在HTML页面中必须是唯一的。

首先选择一个正确的选择器来选择您的输入元素..我正在使用标题类选择器，因为它在所有情况下都存在。

var selectedOption="";
if($('.title').hasClass('small'))
{
  selectedOption='small';
}
else if($('.title').hasClass('medium'))
{
  selectedOption='medium';
}
else
{
  selectedOption='large';
}

//i am assuming you have only one select on your page, else replace it with id selector
$("select option[value="+selectedOption+"]")).prop('selected','true');  //setting the correct option as selected

- Baz1nga

Answer 3

“在jQuery中，我直接将选择的值设置为' medium'，但是下拉菜单仍显示为'small'。”

您没有展示您的jQuery代码，但是要设置具有id =“1”的select元素的值，您需要执行以下操作：

$("#1").val("medium");  // or, obviously, use a variable instead of "medium"

但在您的情况下，您将 id ="1"用于选择和输入字段，这是无效的HTML - id 应该是唯一的。在大多数浏览器中，选择重复的ID将只选择具有该ID的第一个元素。

更改id 并更新jQuery以匹配，它应该可以正常工作。（如果不起作用，请更新您的问题以实际显示您的JS代码，我们可以提供进一步帮助。）

- nnnnnn

---

在jQuery中，如何检查输入字段是否具有以下三个类之一：“small”、“medium”或“large”？使用hasClass()函数，我们只能一次检查一个。 - kamala

鉴于该字段可能还有其他类，最好使用.hasClass()逐个检查它们（如Baz1nga的答案所示）。你的原始实际代码是否有重复的id属性？如果是这样，请不要编辑您的问题使它们唯一，因为那么答案就没有意义了。（如果这只是原始问题中的一个错别字，那么当然应该进行编辑。） - nnnnnn