выберите выбранную опцию, используя jquery, чтобы показать конкретный результат

Question

Используя jquery, как узнать, какая опция выбора выбрана, и "показать" один соответствующий скрытый div?

<select id="mySelect">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>

<label for="name">Name</label>
<input id="name" type="text" />

<button id="search">search</button>

<div id="results-A"> lorem ipsum </div>
<div id="results-B"> lorem ipsum </div>
<div id="results-C"> lorem ipsum </div>

$(document).ready(function(){
$("#results-A").hide();
$("#results-B").hide();
$("#results-C").hide(); 

$("#search").bind("click", function() {

});   

});

Answer 1

Если вы следуете этому соглашению:

<div id="results-1"> lorem ipsum </div>
<div id="results-2"> lorem ipsum </div>
<div id="results-3"> lorem ipsum </div>

тогда:

$("#mySelect").change(function() {

    //optionally, if you want previously selected ones to be hidden
    $("[id^=results-]").hide();

    $("#results-" + $(this).val()).show();
}).change(); // trigger it the first time around, to reveal the 'default'

Демо: http://jsfiddle.net/9aqTB/

Answer 2

если вы используете jQuery 1.4.2, тогда будет показан n-й div в соответствии с выбранным n-ным параметром:

$("#search").click(function() {
    $('div').hide().eq($(':selected').index()).show();
}); 

http://jsfiddle.net/e9Dc5/

Answer 3

извините, но я думаю, что я немного испортил ваше кодирование, но я думаю, что это в основном то, что вы хотите.

Answer 4

Прежде всего, давайте обернем элементы результатов, чтобы они были легко доступны.

<div id="results">
  <div id="results-A"> lorem ipsum </div>
  <div id="results-B"> lorem ipsum </div>
  <div id="results-C"> lorem ipsum </div>
</div>

Затем вы можете использовать значение раскрывающегося списка, чтобы выбрать результат div с этим индексом. Индексы начинаются с 0, поэтому я добавил -1 для правильного соответствия.

$("#search").click(function() {
    var value = parseInt($("#mySelect").val()) -1;
    $("#results").children().hide().eq(value).show();
});

Вот демоверсия http://jsfiddle.net/ShLRh/