Выберите первый снимок, затем отобразите второй снимок

Я новичок в javascript. Надеюсь, кто-то может помочь мне с моим вопросом. Я хотел, чтобы моя форма отображала другую выпадение после того, как выбран первый снимок. Второй снимок зависит от того, какая опция выбрана в первом раскрывающемся списке. Благодаря!Выберите первый снимок, затем отобразите второй снимок

<body> 
<div class="control-group"> 
     <label class="control-label" for="input01">Select</label> 
     <div class="controls"> 
      <select name="client_orderid" id="options" onchange="showText()"> 
      <option value="A"> A</option> 
      <option value="B"> B</option> 
      <option value="C"> C</option> 
      </select> <br> 

      <div class="control-group" id="showA" style="display:none;"> 
      <select name="client_orderid" id="options" onchange="showText()"> 
       <option value="blue"> blue</option> 
       <option value="green"> green</option> 
       <option value="yellow"> yellow</option> 
      </select> 
      </div> 

      <div class="control-group" id="showB" style="display:none;"> 
      <select name="client_orderid" id="options" onchange="showText()"> 
       <option value="sun"> sun</option> 
       <option value="sky"> sky</option> 
       <option value="tree"> tree</option> 
      </select> 
      </div> 

      <div class="control-group" id="showC" style="display:none;"> 
      <select name="client_orderid" id="options" onchange="showText()"> 
       <option value="dog"> dog</option> 
       <option value="cat"> cat</option> 
       <option value="fish"> fish</option> 
      </select> 
      </div> 

     </div> 
     </div>

источник

2015-02-02 Maria Algelika Santos

Вы забыли опубликовать JavaScript, который вы пробовали, который не работал. – j08691

что вы пробовали до сих пор ??? –

Почему вы не используете jQuery? Вы хотите написать 100 заявлений для одной задачи, которая может быть выполнена в 4,5 строках? Проверьте здесь -> http://blogs.learnnowonline.com/2012/10/03/7-benefits-of-jquery/ –

Первоначально дисплей только 1-Dropdown скрыть другие.

Так на изменение 1-го шоу 2 как

$("#1stDropdown").change(function(){ 
    $("#2nsDropdown").show(); 
});

и так далее

источник

2015-02-02 03:56:00

Я думаю, что вы пропустили «* ... Второе падение зависит от того, какая опция выбрана в первом падении вниз», то есть отображаемый элемент выбора должен основываться на значении, выбранном при первом выборе. – RobG

Некоторые моменты правиль-

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

2-также вызывать различные функции на замену другого выбора.

3-Идентификатор всех элементов должен быть уникальным. Если вы хотите, чтобы это было то же самое, использование класса вместо

<div class="control-group"> 
     <label class="control-label" for="input01">Select</label> 
     <div class="controls"> 
      <select name="client_orderid" id="options1" onchange="showTexColor()"> 
      <option value="A"> A</option> 
      <option value="B"> B</option> 
      <option value="C"> C</option> 
      </select> <br> 

      <div class="control-group" id="showA" style="display:none;"> 
      <select name="client_orderid" id="options2" onchange="showTextNature()"> 
       <option value="blue"> blue</option> 
       <option value="green"> green</option> 
       <option value="yellow"> yellow</option> 
      </select> 
      </div> 

      <div class="control-group" id="showB" style="display:none;"> 
      <select name="client_orderid" id="options3" onchange="showTextAnimal()"> 
       <option value="sun"> sun</option> 
       <option value="sky"> sky</option> 
       <option value="tree"> tree</option> 
      </select> 
      </div> 

      <div class="control-group" id="showC" style="display:none;"> 
      <select name="client_orderid" id="options4" onchange="showText()"> 
       <option value="dog"> dog</option> 
       <option value="cat"> cat</option> 
       <option value="fish"> fish</option> 
      </select> 
      </div> 

     </div> 
     </div>

Демо: http://jsfiddle.net/fqzturn4/

источник

2015-02-02 04:05:04 RahulB

Во-первых, передать значение выбранной функции:

<select name="client_orderid" id="options" onchange="showText(this.value)">

Тогда, в функции, шоу или скрыть соответствующий div на основе значения, соответствующего идентификатору элемента (я полагаю, что «A» должен соответствовать «showA» и т. д.):

function showText(value) { 
    var elements = document.querySelectorAll('.controls .control-group'); 
    var re = new RegExp(value + '$'); 

    for (var i=0, iLen=elements.length; i<iLen; i++) { 
     elements[i].style.display = re.test(elements[i].id)? '' : 'none'; 
    } 
}

showText следует использовать только для первого выбора, а не для других, если нет какой-либо логики, которую вы не объяснили.

источник

2015-02-02 04:11:51 RobG

Выберите первый снимок, затем отобразите второй снимок

ответ

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