如何设置选择框选定值

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>

我现在需要的是检查input 字段的类为small 或medium 或large 并将相关的select 框设置为selected。在 jQuery 中，我直接将选定的值设置为medium，但下拉菜单仍然显示small。

如何使用hasClass() 函数检查input 字段是否有这些类？我们可以一次检查这个吗？

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);

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

Answer 3

“在 jquery 中，我直接将选定的值设置为“中”，但下拉菜单仍然显示小“

您不显示您的 jQuery 代码，而是使用 id="1" 设置选择元素的值，您可以这样做：

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

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

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