Reputation: 87
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?
Upvotes: 5
Views: 24469
Reputation: 1151
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);
Upvotes: 5
Reputation: 15579
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
Upvotes: 3
Reputation: 150080
"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 id
s 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.)
Upvotes: 3