How to make the contents of the second <select> depend on the selection of the element of the first <select> . Those. until the user selects an item in the first (namely, it is on <option>---</option> ), then in the second there is a disabled attribute. When it is already selected, the attribute is removed and a menu is created with items dependent on the choice of an item in the first menu.

Tell me, please, how to implement such a thing, or can there be ready-made plugins?

    3 answers 3

    Using jquery: http://jsfiddle.net/866LM/

      Well, there are 2 solutions:
      1st:

       <script> var dipla = 0; function GetSel(i){ document.getElementById('pse-'+dipla).style.display = 'none'; document.getElementById('pse-'+i).style.display = 'block'; dipla = i; } </script> <select id=main OnChange="GetSel(this.selectedIndex);"><option selected value="1 случай">1 случай</option><option value="2 случай">2 случай</option></select> <select id=pse-0>...</select> <!--Первый случай --> <select id=pse-1 style="display:none;">...</select><!--Второй случай -->

      And the second, more professional and optimized through AJAX, but it makes no sense if there are not many cases in the first selection. But if we are talking about countries and cities, then this method is desirable. I will not paint it, because that's a lot.

        Type:

         <script>$('первый_селект').change(function(el){$('второй_селект').removeAttr('disabled').append('пункты, генерируемые каким-нибудь скриптом, в зависимости от значения el')});</script>

        Only this already seems to be a bad tone - it is customary to immediately show the first item in the first select and the unlocked second one with dependent items. Ie, nakakykh "choose country" within selektov