Afshin Haghighat Afshin Haghighat - 6 months ago 15
Javascript Question

How to hide or show an input with two select options using jquery

I've got two select options which I want them to make changes to an input.

This is my js code code:

$(document).ready(function() {
$('select[name=Start]').change(function() {
if (this.value == 'St1') {
$('#PlPrc').css("display", "");
}
else if (this.value == 'St2') {
if($('select[name=End]').value == 'End1') {
$('#PlPrc').css("display", "");
}
else{
$('#PlPrc').css("display", "none");
}
}
});
});


and this is the html code:

<select name="Start">
<option value="St1">End 1</option>
<option value="St2">End 2</option>
</select>

<select name="End">
<option value="End1">End 1</option>
<option value="End2">End 2</option>
</select>

<div id="PlPrc" style="display:none;"><input type="text" name="PlPrc" value=""/></div>


The problem is that, the javascript code does not process the second if clause where it is:

if($('select[name=End]').value == 'End1') {
$('#PlPrc').css("display", "");
}

Answer

Changing

$('select[name=End]').value

to

$('select[name=End]').val()

should do it.

More info on how to get value from a select element here.

Comments