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

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

<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() { 

}); 

});

источник

2010-08-27 roxstyle

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

<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/

источник

2010-08-27 00:33:49 karim79

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

<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/

источник

2010-08-27 00:40:45 Marko

Вы будете держать показать все больше и больше div с этим. Разве вы не должны скрывать текущий отображаемый div? –

Вы правы, я добавил свойство hide() для всех элементов до того, как произойдет конкретное шоу. – Marko

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

<html> 
<head> 
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     hideAllResults(); 

     // on change show them 
     $("#mySelect").change(function(){ 
      hideAllResults(); 
      $("#"+($(this).val())).show(); 
     }); 

    }); 
    function hideAllResults(){ 
     //hide all result div first 
     $("#resultDiv div").each(function(){ 
      $(this).hide(); 
     }); 
    } 
</script> 
</head> 
<select id="mySelect"> 
    <option value="results-A">First</option> 
    <option value="results-B">Second</option> 
    <option value="results-C">Third</option> 
</select> 

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

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

<div id="resultDiv"> 
    <div id="results-A" class="result"> lorem ipsum A</div> 
    <div id="results-B" class="result"> lorem ipsum B</div> 
    <div id="results-C" class="result"> lorem ipsum C</div> 
</div> 
</html>

источник

2010-08-27 01:08:12 melaos

Ваша функция hideAllResults может быть просто заменена на выполнение $ ("# resultDiv div"). Hide(). hide() работает с массивом элементов, а не с одним .. поэтому нет необходимости перебирать через них – Marko

lol. Да, ты прав, я плохой. Недавно я разработал счастливый код. – melaos

если вы используете JQuery 1.4.2, то это покажет, п-й DIV в соответствии с п-й вариант выбран:

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

http://jsfiddle.net/e9Dc5/

источник

2010-08-27 01:28:43

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

ответ

Смежные вопросы