Измените содержимое DIV на изменение SELECT

Question

Я ищу способ изменения содержимого div при выборе опции в раскрывающемся списке выбора.

я наткнулся на следующее:

<script type="text/javascript" src="jquery.js"></script> 
<!-- the select --> 
<select id="thechoices"> 
    <option value="box1">Box 1</option> 
    <option value="box2">Box 2</option> 
    <option value="box3">Box 3</option> 
</select> 

<!-- the DIVs --> 
<div id="boxes"> 
    <div id="box1"><p>Box 1 stuff...</p></div> 
    <div id="box2"><p>Box 2 stuff...</p></div> 
    <div id="box3"><p>Box 3 stuff...</p></div> 
</div> 

<!-- the jQuery --> 
<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript"> 

$("#thechoices").change(function(){ 
    $("#" + this.value).show().siblings().hide(); 
}); 

$("#thechoices").change(); 

</script> 

Это работало отлично на своем собственном, но я хочу использовать его с помощью следующего сценария:

http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

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

Любые идеи о том, что я могу использовать рядом с этим скриптом, чтобы получить различное содержимое DIV для отображения для разных параметров SELECT?

Вот тестовая страница: http://freeflamingo.com/t/new.html

Answer 1

Это не совсем понятно, где вы собираетесь здесь не так, но я бы образом это какое-то нарушение конвенции в отношении нескольких идентификаторов одного и того же имени или просто вопроса с множественный выбор, который вы используете с этим довольно архаичным сценарием DD; Я хотел бы предложить найти альтернативу JQuery и или пытается это:

<div class="nav"> 
    <select> 
     <option value="1">Box 1</option> 
    ... 
    </select> 

    <select> 
     <option value="6">Box 6</option> 
    ... 
    </select> 
</div> 

<div> 
    <div id="box1"><p>Box 1 stuff...</p></div> 
... 
</div> 

$(".nav select").change(function(){ 
    $("#box" + $(this).val()).show().siblings().hide(); 
}); 

Этот путь, имеющий все выбирает в пределах .nav (или что вы называете это) изменение любого из них будет вызывать необходимые методы, чтобы показать DIV ты желаешь.

Answer 2

Я вижу несколько проблем с тем, что вы разместили, сначала у вас одинаковый идентификатор на обоих блоках выбора, что вызовет проблемы. Также вы запускаете код jquery, который определяет функцию изменения до того, как был создан выбор. Таким образом, вы можете либо переместить JavaScript после последнего div, либо запустить его только после того, как страница будет готова. Я предлагаю последнее, и есть пример ниже. Сделайте это и исправьте идентификаторы на выбор, и вы должны быть намного ближе к тому, что вы хотели.

$(document).ready(function() 
{ 

$("#thechoices").change(function() 
{ 
    $("#" + this.value).show().siblings().hide(); 
}); 
} 

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

Answer 3

Глядя на страницу, которую вы отправили на адрес Steve, похоже, что ваша проблема связана с уникальными идентификаторами.

Меняйте выбирает так, что каждый из них имеет свой собственный уникальный идентификатор, как так:

<select name="firstlevel" class="..." id="firstlevel">...</select> 
<select name="secondlevel" class="..." id="secondlevel">...</select> 

Затем измените JavaScript, чтобы ссылаться на идентификатор, который вы хотите изменить дивы

$("#secondlevel").change(function() { 
    ... 
}); 

Наконец, этот скрипт использует значение выбранного параметра, чтобы найти div, чтобы показать, чтобы вам нужно, чтобы ваши полевые div имели действительные идентификаторы. HTML Идентификаторы не могут начинаться с цифрами, поэтому изменить разметку:

<div id="boxes"> 
    <div id="box1">...</div> 
    <div id="box2">...</div> 
    <div id="box3">...</div> 
</div> 

И установите значения в вашем выборе опций, чтобы соответствовать этим идам

<select ... id="secondlevel"> 
    <option value="box1">1 months XBox live (1 ref)</option> 
    etc... 
</select>