5

我有一个可变宽度的输入字段，例如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字段是否具有smallor mediumor类large 并将相关select框设置为selected. 在 jQuery 中，我直接将选定的值设置为medium，但下拉菜单仍然显示small。

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

4

3 回答 3

5

用这个

$('#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);
于 2012-09-15T06:21:15.770 回答
3

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

你不显示你的 jQuery 代码，但要设置 select 元素的值，id="1"你会这样做：

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

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

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

于 2012-09-15T06:02:32.797 回答
3

首先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
于 2012-09-15T06:07:15.657 回答