Повторное отображение того же раскрывающегося списка в HTML ниже исходного раскрывающегося списка?

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<head> 
 
<meta charset="ISO-8859-1"> 
 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script> 
 

 
\t $(document).ready(function() { 
 
\t \t $("select").change(function() { 
 
\t \t \t $("select").after("<br>here"); 
 
\t \t \t 
 
\t \t \t //window.alert("We're getting somewhere!") 
 
\t \t \t //document.write("#1"); \t \t \t 
 
\t \t }); 
 
\t }); 
 
</script> 
 
<title>Query Tool</title> 
 
</head> 
 
<h1>Organizer Tool</h1> 
 
<HR> 
 
<p>Please choose search criteria:</p> 
 
<select id=1> 
 
\t <option value="MMSI">MIMSI</option> 
 
\t <option value="Ship Type">shipType</option> 
 
\t <option value="Anomaly Type">Anomaly Type</option> 
 
</select> 
 
<button type="button">Search</button> 
 
<body><br><br><br> 
 
\t <p>Testing.</p> 
 

 
</body> 
 
</html>

Я работаю над приложением, которое взаимодействует с пользователями через веб-сервер (с использованием JQuery) и получает строку, которая принимается от браузера на стороне в виде раскрывающегося вниз. После выбора опции пользователь должен нажать на поиск и HTTP-запрос будет отправлен с этой строкой и получен на стороне сервера, с которого он взаимодействует с базой данных и запрашивает эту строку. Найдя этот поиск, он распечатает его на экране клиента в табличном формате. Теперь моя проблема заключается в выборе нескольких вариантов запроса; Как я могу отобразить новое раскрывающееся меню для каждого времени, когда пользователь выбирает один из предыдущего? У меня есть новичок в понимании обработчиков событий и понимаю, что я могу инициировать событие на «изменении» и отображать текст; но может ли кто-нибудь быть таким любезным, чтобы объяснить, как я могу отобразить это раскрывающееся меню с параметрами ниже первого после обнаружения «изменения»? До сих пор я мог отображать строку «здесь» каждый раз, когда в раскрывающемся списке происходит изменение.

спасибо, Al

источник

2016-10-14 Almanz

Google для каскадного меню. – Barmar

Если я вас понял правильно, вы искали что-то вроде этого:

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<title>Query Tool</title> 
<meta charset="ISO-8859-1"> 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script> 

    $(document).ready(function() { 
     $("#first_select").change(function() { 
      //$.post('where',{data},function (d) {  //this is to post data to the server and get the answer with function 
       // documentation is at http://api.jquery.com/jQuery.post/ 
       // if the answer is in JSON, decode it 
       var answer = '[{"ID":"1","name":"Astronomy"},{"ID":"2","name":"Microscopy"},{"ID":"3","name":"Bilogy"}]'; 
       var d = JSON.parse(answer); 

       var s = $("<select id=\"select_two\" name=\"select_two\" />"); 
       for(var val in d) { 
        $("<option />", {value: d[val].ID, text: d[val].name}).appendTo(s); 
       } 
       $("#selector_area").empty(); 
       s.appendTo("#selector_area"); 



      //}); // closing brackets for the post method 
     }); 
    }); 
</script> 

</head> 

<body><br><br><br> 
    <p>Testing.</p> 
    <h1>Organizer Tool</h1> 
<HR> 
<p>Please choose search criteria:</p> 
<select id="first_select"> 
    <option value="MMSI">MIMSI</option> 
    <option value="Ship Type">shipType</option> 
    <option value="Anomaly Type">Anomaly Type</option> 
</select> 

<div id="selector_area"></div> 
<button type="button">Search</button> 
</body> 
</html>

источник

2016-10-14 23:16:31 Vyacheslav

Это самое близкое к тому, что я говорил. Вместо того, чтобы просто перерисовывать один лишний раскрывающийся список, я хочу, чтобы его можно было повторно отображать после каждого нового изменения выпадающего списка. – Almanz

Итак, хотите ли вы получить какие-либо другие улучшения идея дальнейшего развития самого себя? Или это нормально? – Vyacheslav

Да, это было полезно. Я смог достичь своей конечной цели. – Almanz

Повторное отображение того же раскрывающегося списка в HTML ниже исходного раскрывающегося списка?

ответ

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