динамический выпадающий список (флажки) - PullRequest
Новая
       0

динамический выпадающий список (флажки)

0 голосов
/ 18 мая 2011

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

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 18 мая 2011

Прежде всего, я рекомендую установить атрибут 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 голос
/ 18 мая 2011

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...