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?

Ottilie

In jquery how check whether the input field has any of the three class "small" or "medium" or "large" ? using hasClass() we can able to check one at a time. – Ottilie

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

Anatomize

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

Blackboard

In jquery how check whether the input field has any of the three class "small" or "medium" or "large" ? using hasClass() we can able to check one at a time. – Ottilie

Given that the field could have other classes too, it's probably best to just check them one at a time with .hasClass() (as shown in Baz1nga's answer). Did your original real-world code actually have duplicated id attributes? If so, please don't edit your question to make them unique because then the answers don't make sense. (If it was just a typo in the original question then of course you should edit it.) – Blackboard

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

Endothelioma