5

small、、largeのような可変幅の入力フィールドが 1 つあります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フィールドのクラスがsmallormediumまたは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 を持つ最初の要素が選択されます。

s を変更し、id一致するように 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 に答える