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

Answer 3

first of all id has to be unique on an html page

Firstly choose a selector select your input element correctly.. I am using the title class selector since its there in all the cases

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