Выпадающий выбор заполняет div со скрытыми кнопками, которые затем заполняют другой div скрытым контентом по клику

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

Название говорит все это:

Выберите раскрывающийся вариант
на основе выбора выпадающего назначенный ДИВ #info заполняется со скрытым набором кнопок (и изменение кнопки набора, на основании которых опция выбран).
Эти кнопки можно щелкнуть, чтобы отобразить скрытый контент в дополнительном обозначенном div # info2 (который также изменяет содержимое на основе щелчка кнопки).

В моей скрипке я попытался показать, что я пытаюсь сделать, только я использовал кнопки вместо выпадающего списка.

Надеюсь, это имеет смысл!

Редактировать: Я хочу, чтобы иметь возможность свободно переключаться между всеми кнопками и выпадающими списками, чтобы при нажатии на какой-либо конкретный выбор, любой контент, связанный с предыдущим выбором, будет удален из div, который затем будет заполнен текущее содержание выбора div.

$(document).ready(function(){ 
    $('.buttons button').click(function(){ 
     $('#info').empty(); 
     $('#info').html($("#" + $(this).data('link')).html()); 
    }); 

}); 

<body> 
     <div class="want-this-to-be-dropdown"> 
      <ul id="button-column" style="list-style: none;"> 
       <li class="buttons"><button id="button1" data-link="option1">Button 1</button></li> 
       <li class="buttons"><button id="button2" data-link="option2">Button 2</button></li> 
       <li class="buttons"><button id="button3" data-link="option3">Button 3</button></li> 
      </ul> 
     </div> 
     <div id="info-div"> 
      <div id="info"> 

      </div> 
     </div> 
<div id="hiddenDivs" style="display:none;"> 
    <div class="info" id="option1"> 
     <div class="button-panel"> 
      <ul id="button-column" style="list-style: none;"> 
       <li class="buttons"><button id="button1" data-link="option4">Option 4</button></li> 
       <li class="buttons"><button id="button2" data-link="option5">Option 5</button></li> 
       <li class="buttons"><button id="button3" data-link="option6">Option 6</button></li> 
      </ul> 
     </div> 
     <div id="info-div"> 
      <div id="info2"> 

      </div> 
     </div> 
    </div> 
    <div class="info" id="option2"> 
     <div class="button-panel"> 
      <ul id="button-column" style="list-style: none;"> 
       <li class="buttons"><button id="button1" data-link="option7">Option 7</button></li> 
       <li class="buttons"><button id="button2" data-link="option8">Option 8</button></li> 
       <li class="buttons"><button id="button3" data-link="option9">Option 9</button></li> 
      </ul> 
     </div> 
     <div id="info-div"> 
      <div id="info2"> 

      </div> 
     </div> 
    </div> 
    <div class="info" id="option3"><div class="button-panel"> 
      <ul id="button-column" style="list-style: none;"> 
       <li class="buttons"><button id="button1" data-link="option10">Option 10</button></li> 
       <li class="buttons"><button id="button2" data-link="option11">Option 11</button></li> 
       <li class="buttons"><button id="button3" data-link="option12">Option 12</button></li> 
      </ul> 
     </div> 
     <div id="info-div"> 
      <div id="info2"> 

      </div> 
     </div> 
     </div> 


     <div class="info" id="option3"><div class="button-panel"> 
      <ul id="button-column" style="list-style: none;"> 
       <li class="buttons"><button id="button1" data-link="option10">Fee</button></li> 
       <li class="buttons"><button id="button2" data-link="option11">Fi</button></li> 
       <li class="buttons"><button id="button3" data-link="option12">Foo</button></li> 
      </ul> 
     </div> 
     <div id="info-div"> 
      <div id="info2"> 

      </div> 
     </div> 
     </div> 
</div> 
</body>

Here's my fiddle

источник

2016-11-21 lcunning

Итак, вот он идет ...

Допустим, у вас есть поле выбора:

function func() { 
 
    var val = document.getElementById("select").value; 
 
    
 
    if(val == "bla") { 
 
    document.getElementById("bla").style.visibility = "visible"; 
 
    } 
 
    
 
    if(val == "blo") { 
 
    document.getElementById("blo").style.visibility = "visible"; 
 
    } 
 
}

<select id="select" onchange="func()"> 
 
    <option value="" disabled selected style="display:none;">Label 1</option> 
 
    <option value="bla">bla</option> 
 
    <option value="blo">blo</option> 
 
</select> 
 

 

 
<div id="bla" style="visibility:hidden; width:30px; height:20px; background-color:#f00"></div> 
 

 
<div id="blo" style="visibility:hidden; width:30px; height:20px; background-color:#ff0"></div>

У вас есть идея?

Извините, я только что увидел, что вы использовали jQuery ........... У вас было бы что-то вроде класса с видимостью: скрытым и переключать его с помощью jQuery ... Эквивалентное событие be change(). Ну, это все равно должно позвонить в колокол. Если вам нужна дополнительная помощь (например, с jQuery), не стесняйтесь спрашивать.

:-)

источник

2016-11-21 03:09:40 Daidon

Думаю, я вижу, что вы здесь говорите, но это не совсем тот ответ, который я ищу. В вашем примере кода я нажал на один раскрывающийся список, а затем другой, но предыдущий контент не исчез. Я получаю, как работают выпадающие списки, но я не знаю, как их соединить со скрытым контентом, чтобы заполнить div. Если вы посмотрите на мою скрипку, вы (надеюсь) увидите, что я пытаюсь сделать. – lcunning

Я посмотрел на твою скрипку. Вот почему я упомянул переключатель jQuery. Хорошо, дай мне секунду, я закоучу тебе что-то очень быстро. – Daidon

Так вот другой подход ...

$(document).ready(function(){ 
 
    $('.buttons button').click(function(){ 
 
     $('#info').empty(); 
 
     $('#info').html($("#" + $(this).data('link')).html()); 
 
    }); 
 
}); 
 

 
function func() { 
 
    $(".info").each(function() { 
 
     $(this).css("display", "none"); 
 
    }); 
 
    
 
    var val = $("#select").val(); 
 
    
 
    if(val == "bla") { 
 
     $("#option1").css("display", "block"); \t 
 
    } 
 
\t 
 
    if(val == "blo") { 
 
     $("#option2").css("display", "block"); \t 
 
    } 
 
}

#button-column { 
 
    display: inline; 
 
    float: left; 
 
} 
 
button { 
 
    font-size: 10px; 
 
    width: 50px; 
 
    height: 30px; 
 
    margin: 15px; 
 
} 
 

 
#info { 
 
    width: 200px; 
 
    height: 200px; 
 
    padding-top: 37.5px; 
 
    border: 1px solid black; 
 
    display: inline; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
.info { 
 
\t display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="want-this-to-be-dropdown"> 
 
    <ul id="button-column" style="list-style: none;"> 
 
     <select id="select" onchange="func()"> 
 
      <option value="" disabled selected style="display:none;">Label 1</option> 
 
      <option value="bla">bla</option> 
 
      <option value="blo">blo</option> 
 
     </select> 
 
    </ul> 
 
</div> 
 
<div id="info-div"> 
 
    <div id="info"> 
 
     <div class="info" id="option1"> 
 
      <div class="button-panel"> 
 
       <ul id="button-column" style="list-style: none;"> 
 
        <li class="buttons"><button id="button1" data-link="option4">Option 1</button></li> 
 
        <li class="buttons"><button id="button2" data-link="option5">Option 2</button></li> 
 
        <li class="buttons"><button id="button3" data-link="option6">Option 3</button></li> 
 
       </ul> 
 
      </div> 
 
      <div id="info-div"> 
 
       <div id="info1"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="info" id="option2"> 
 
      <div class="button-panel"> 
 
       <ul id="button-column" style="list-style: none;"> 
 
        <li class="buttons"><button id="button1" data-link="option4">Option 4</button></li> 
 
        <li class="buttons"><button id="button2" data-link="option5">Option 5</button></li> 
 
        <li class="buttons"><button id="button3" data-link="option6">Option 6</button></li> 
 
       </ul> 
 
      </div> 
 
      <div id="info-div"> 
 
       <div id="info2"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Сам код не должен быть слишком трудно понять. Если у вас есть проблемы, я могу сломать это для вас :-)

источник

2016-11-21 03:43:01 Daidon

Спасибо за попытку снова - все еще не совсем то, что я ищу.Здесь есть две основные проблемы: я могу перемещаться между двумя раскрывающимися списками, но когда я нажимаю одну из кнопок, которые заполняют div, я не могу вернуться к другому выпадающему списку. Вторая проблема заключается в том, что нет дополнительного div (см. # Info2 в моем примере), заполняемого содержимым при нажатии одной из кнопок. Я собираюсь свободно перемещаться между вариантами выпадающего списка, кнопками. Есть предположения? – lcunning

Думаю, я это понял. Большое спасибо за ваши предложения! – lcunning

О, хорошо, я только намеревался показать, в каком направлении это может пойти. Но я счастлив, что ты все же справился! – Daidon

Выпадающий выбор заполняет div со скрытыми кнопками, которые затем заполняют другой div скрытым контентом по клику

ответ

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