динамический выпадающий список (поля выбора)

ProgramBox

динамический выпадающий список (поля выбора)

Post author:admin
Запись опубликована:26 апреля, 2023
Post category:Вопросы по программированию

#javascript #forms

#javascript #формы

Вопрос:

Вот в чем проблема.

У меня есть выпадающий список выбора.

    <select name="listingtype" id="speedD" style="width:210px;">
      <option>For Sale</option>
      <option>For Rent</option>
   </select>

И другой выпадающий список выбора, в котором отображаются цены, который при загрузке страницы пуст..

Итак, если пользователь нажимает на продажу: затем другой выпадающий список выбора загружает прайс-лист следующим образом:

    <select name="valueA" id="speedF" style="width:200px;">
     <option value="Any" selected="selected">Any</option>
     <option value="50000">$50,000</option>
     <option value="100000">$100,000</option>
     <option value="150000">$150,000</option>
     <option value="200000">$200,000</option>
     <option value="250000">$250,000</option>

И если они выберут для аренды. Раскрывающийся список выбора распространяется следующим образом:

 <select name="valueA" id="speedF" style="width:200px;">
    <option value="Any" selected="selected">Any</option>
    <option value="100">$100</option>
    <option value="150">$150</option>
    <option value="200">$200</option>
    <option value="250">$250</option>
    <option value="300">$300</option>
</select>

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

Приветствия.

1. Мы поможем с проблемами, но не с кодированием этого для вас.

2. Ну, по какой-то причине ссылка, которую я разместил в вопросе, не была включена. Но спасибо за ваш ценный вклад. Внесет изменения в вопрос

3. Можете ли вы выбрать jQuery для этого экземпляра?

4. Да, похоже, jQuery подходит, да

5. Итак, что это, полностью на стороне клиента или вы хотите использовать AJAX (учитывая, что AJAX требует перехода на сервер)?

Ответ №1:

Прежде всего, я рекомендую установить атрибут value в ваших элементах option. Пример:

 <option value="sale">For sale</option>
<option value="rent">For rent</option>

Если вы еще не слышали или не видели библиотеку JavaScript, известную как jQuery, я настоятельно рекомендую ознакомиться с ней! Это может быть очень полезно при создании динамического сайта, подобного этому, с использованием минимального JavaScript.

Я бы сделал что-то вроде следующего:

 <html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
    if (document.yourformname.listingtype.value == "sale") {
        //it is for sale
        $('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
    } else {
        //fill it with the other elements
    }
</script>
</body>
</html>

Теперь, конечно, вы могли бы загрузить его более динамически с помощью JSON или XML, но это зависит от вас. Я действительно рекомендую проверить библиотеку:
http://jQuery.com

1. ах, о’кей, это классная идея. С этим придется повозиться, спасибо

2. также еще один хороший ресурс для придания вашей странице красивого вида и элементам формы привлекательного вида, вы можете перейти к www.jqueryui.com это будет полезно, как только вы освоите jquery

3. наши формы красивее, чем dolly parton по скорости 😉 На самом деле элементы используют пользовательский интерфейс jquery.

Ответ №2:

Используйте JavaScript, чтобы заполнить пустое поле выбора опциями, когда пользователь выбирает опцию (или onchange или onselect , забудьте какую) в поле выбора «Для продажи» / «Для аренды».

РЕДАКТИРОВАТЬ: Более конкретно, пусть это второе поле будет пустым при загрузке страницы. Сохраняйте параметры в массивах. Используйте цикл для создания новых элементов OPTION на основе каждого элемента массива.