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

#javascript #jquery #html

#javascript #jquery #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>

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

</body>
</html>

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

Большое спасибо, Эл

Ответ №1:

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

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

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

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

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