Javascript-форум - Обработка select-ов

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Обработка select-ов (https://javascript.ru/forum/misc/47145-obrabotka-select-ov.html)

Обработка select-ов

Добрый вечер, подскажите пожалуйста, есть несколько селектов:

<select class="filtered" name="13" id="73">
<option value="">Все</option>
<option value="152">90x190</option>
<option value="154">90x200</option>
<option value="166">120x190</option>
</select>

<select name="option[1016]" id="55">
<option value="22503" >90x190</option>
<option value="22504" >90x200</option>
<option value="22505" >120x190</option>
</select>

<select name="option[504]" id="55">
<option value="201" >90x190</option>
<option value="202" >90x200</option>
<option value="203" >120x190</option>
</select>

Как с помощью скрипта сделать так, чтобы если в первом селекте значение по-умолчанию - ничего не делать, а если что-то выбрали, то выбрать такие-же значения в других селектах?
Пытался что-то своять, но дальше сдвинуться не могу:

<script type='text/javascript'>
(function () {
"use strict";
jQuery(function () {
$( '#73' ).change(function () {
var sell_id = $( this ).val();
if (sell_id == 0) { return; }

</script>

<body>
  <select class="filtered" name="13" id="73">
    <option value="">Все</option>
    <option value="152">90x190</option>
    <option value="154">90x200</option>
    <option value="166">120x190</option>
  </select>
  <select name="option[1016]" id="55">
    <option value="22503">90x190</option>
    <option value="22504">90x200</option>
    <option value="22505">120x190</option>
  </select>
  <select name="option[504]" id="56">
    <option value="201">90x190</option>
    <option value="202">90x200</option>
    <option value="203">120x190</option>
  </select>
  <script>
    var sel = document.getElementById("73");
    var sel1 = document.getElementById("55");
    var sel2 = document.getElementById("56");
    sel.onchange = function () {
      var txt = this.options[this.selectedIndex].text;
      selected(sel1, txt);
      selected(sel2, txt);
    }

    function selected(el, txt) {
      for (var i = 0; i < el.options.length; i++) {
        if (el.options[i].text == txt) {
          el.options[i].selected = true;
          return;
        }
      }
      el.options[0].selected = true;
    };
  </script>
</body>

id элементов должны быть оригинальные :)

deltaman,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
   $(function () {
       var $selects = $('select').not('#73');
       $('#73').change(function () {
           var sell_id = $(this).val(),
               text = $("option[value='" + sell_id + "']", this).text();
           $selects.each(function (indx, element) {
               var val = $("option:contains('" + text + "')", element).val();
               val && $(element).val(val)
           });
       })
   })
  </script>
</head>

<body>
 <select class="filtered" name="13" id="73">
 <option value="">Все</option>
 <option value="152">90x190</option>
 <option value="154">90x200</option>
 <option value="166">120x190</option>
 </select>

 <select name="option[1016]" id="55">
 <option value="22503" >90x190</option>
 <option value="22504" >90x200</option>
 <option value="22505" >120x190</option>
 </select>

 <select name="option[504]" id="55">
 <option value="201" >90x190</option>
 <option value="202" >90x200</option>
 <option value="203" >120x190</option>
 </select>

</body>

</html>

Спасибо Всем большое, действительно работают! Вариант от Рони вроде больше подходит, так как не использует id. Есть проблемка только, "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" конфликтует с используемой на сайте "jquery-1.7.1.min.js". Если задействовать jquery.min.js, то грохается всё, банеры, верстка, скрипты другие, а если родную оставить - jquery-1.7.1.min.js, то обработка селектов не работает. Может есть какой-нибудь способ их подружить?

deltaman,
попробуйте 1.9.1 вместо 1.7.1

Пробовал, все что нашел, ничего кроме 1.7.1.mini не работает

deltaman,
код выше работает с любыми версиями jquery -- может вы грузите сразу две версии?

Спасибо всем кто откликнулся, сегодня попробовал прикрутить это на сайт. Обнаружились нюансы:
Вызов функции по change делать нельзя, мешаются уже имеющиеся скрипты, которые используя ajax, без перезагрузки страницы формируют на ней список селектов(select[name^=option]), исходя из выбора в селекте #73.
То есть, выбирая в селекте #73 - 90х190, мы формируем некий список селектов (у которых в наборе обязательно есть 90х190) которые подгружаются на страницу. Но кроме 90х190 у подгружаемых селектов есть еще другие значения, у одних больше у других меньше и порядок расположения описаний непредсказуем.

В связи с этим, есть предположение, что функцию нужно запускать после того как ajax подгрузит все селекты, потом просто смотрим что стоит в #73, то и устанавливаем.
Второй вариант, прикрепить функцию к каждому селекту, так как php код у них общий, чтобы она срабатывала непосредственно при формировании его и глядя на то, что стоит в #73, выбирала бы такое же "описание".

Подскажите пожалуйста, как выкрутиться в этом случае?
Может как-то по "страница загружена, выполнить"