Question

When user select United States I show textbox for US city but what if user deselect the United States?

How could I check if there is United States selected or not if not the hide City textbox.

my script is:

<tr>
<td nowrap="nowrap">
<label for="countryId">Countries</label>
</td>
<td>
<select id="countryId" onchange="usCity();" multiple="multiple" name="countryId[]">
<option value="1">United States</option>
<option value="2">United Kingdom</option>
<option value="3">Australia</option>
<option value="4">UAE</option>
<option value="5">Denmark</option>
<option value="6">Czech Republic</option>
<option value="7">Brazil</option>
<option value="8">Singapore</option>
<option value="9">Pakistan</option>
<option value="10">Germany</option>
<option value="11">India</option>
<option value="12">SriLanka</option>
<option value="13">UK</option>
<option value="14">Algeria</option>
<option value="15">Andorra</option>
<option value="16">Caneda</option>
<option value="17">HongKong</option>
</select>
</td>
<td valign="top">
</tr>
<tr id="usCitytr" style="display: none;">
<td nowrap="nowrap">
<label for="USCity">US City Name</label>
</td>
<td colspan="3">
<input id="USCity" type="text" value="" name="USCity">
</td>
</tr>

function usCity()
    {
        if ($("#countryId option:selected").text() == 'United States' || $("#countryId option:selected").text() == 'US'){
            $("#usCitytr").show();
        }
    }

I thing on each selection I have to get all selected values in array structure and then using loop to find ‘US’ if found then show ‘US City’ textbox else hide. For this I used

alert($('select#countryId').text());

but it returns all values present in combobox. How ever

alert($('select#countryId').val());

returns only selected value but I need ‘US’ not the index where ‘US’ is present because ‘US’ might be any where.

Answer 1

<option id="opt_US" value="1">United States</option>


if ($("#opt_US").is(":selected") {
    $("#usCitytr").show();
} else {
    $("#usCitytr").hide();
}