How to set select box selected value

Question

I have one input field with variable width like small, large, medium. I have CSS styling for that.

Example:

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" />

Meanwhile I have a select box:

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

What I require now is to check the input field has class of small or medium or large and to set the relevant select box as selected. In jQuery I have directly set the selected values as medium, but still the drop-down shows small.

How do I check whether the input field has any of these classes using the hasClass() function? Are we able to check for this one at a time?

Answer 1

Use this

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

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

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

Use .hasClass() for the next one.

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

Answer 2

"In jquery i have directly set the selected values as "medium", but still the drop-down shows small"

You don't show your jQuery code, but to set the value of the select element with id="1" you'd do this:

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

But in your case you've used id="1" for both the select and the input field, which is invalid html - id should be unique. In most browsers selecting by an id that is duplicated will just select the first element with that id.

Change the ids and update your jQuery to match and it should work fine. (If that doesn't work, please update your question to actually show your JS code and we can provide further help.)