Блог

У меня есть выпадающий список и текстовое поле. Когда пользователь выбирает любую опцию в выпадающем списке, это изменяет текст в текстовом поле. Мой вопрос в том, как я могу получить выбранное значение в массиве и задать соответствующий текст из массива?

У меня есть код, запущенный следующим образом:

 <select type="text" name="pipe_size" id="pipe_size">
    <option value="default_pipe_size" selected>PIPE SIZE</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="32">32</option>
    <option value="40">40</option>
</select>
<input type="text" name="bdmm" id="bdmm" />
  

JQUERY:

 $('#pipe_size').change(function() {
    // update input box with the currently selected value

    if ( $("#pipe_size option:selected").text() == "15") {
        $('#bdmm').val("17.1");
    }
    if ( $("#pipe_size option:selected").text() == "20") {
        $('#bdmm').val("27.1");
    }
    if ( $("#pipe_size option:selected").text() == "25") {
        $('#bdmm').val("27.1");
    }
    if ( $("#pipe_size option:selected").text() == "32") {
        $('#bdmm').val("37.1");
    }
    if ( $("#pipe_size option:selected").text() == "40") {
        $('#bdmm').val("47.1");
    }
});
  

Я думаю ^ этот код можно сделать более эффективным и чистым с использованием массивов. Какие-нибудь указания, пожалуйста?

Это могло бы сделать вашу жизнь намного лучше, если бы значения несколько совпадали:

HTML:

     <select type="text" name="pipe_size" id="pipe_size">
         <option value="default_pipe_size" selected>PIPE SIZE</option>
         <option value="17.1">15</option>
         <option value="27.1">20</option>
         <option value="27.1">25</option>
         <option value="37.1">32</option>
         <option value="47.1">40</option>
     </select>
     <input type="text" name="bdmm" id="bdmm" />
  

JS:

         $('#pipe_size').change(function() {
            // update input box with the currently selected value
            $('#bdmm').val(this.value);
        });
  

Скрипта:http://jsfiddle.net/maniator/qRqLt /

Я предполагаю, что вам нужно отправить «pipe_size» на сервер, в противном случае вы можете просто сохранить данные в атрибуте value. Если это так, есть несколько подходов, которые вы могли бы предпринять. От наименьшего к наиболее желаемому:

1) Использовать регистр переключения:

 $('#pipe_size').change(function() {
                var val;
                switch(this.value) {
                    case "15": val = "17.1"; break;
                    case "20": val = "27.1"; break;
                    case "25": val = "27.1"; break;
                    case "32": val = "37.1"; break;
                    case "40": val = "47.1"; break;
                    default:   val = "";     break;
                }
                $('#bdmm').val(val);
            });
  

2) Использовать объект:

 $('#pipe_size').change(function() {
                var map = {
                    "15": "17.1",
                    "20": "27.1",
                    "25": "27.1",
                    "32": "37.1",
                    "40": "47.1"
                };
                $('#bdmm').val(map[this.value] || "");
            });
  

3) Используйте элементы данных и сохраните отображение в массиве:

 <select type="text" name="pipe_size" id="pipe_size">
<option value="default_pipe_size" selected>PIPE SIZE</option>
<option value="15" data-bdmm="17.1">15</option>
<option value="20" data-bdmm="27.1">20</option>
<option value="25" data-bdmm="27.1">25</option>
<option value="32" data-bdmm="37.1">32</option>
<option value="40" data-bdmm="47.1">40</option>
</select>
<input type="text" name="bdmm" id="bdmm" />

<script>
    $('#pipe_size').change(function() {
       $('#bdmm').val($("option:selected", this).data('bdmm'));
    });
</script>
  

Почему бы вам не сохранить значение в переменной и вместо этого использовать оператор switch?

 $('#pipe_size').change(function() {
    var num = $(this).val();

    // update input box with the currently selected value
    switch(num) {
        case "15": $('#bdmm').val("17.1"); break;
        case "20": $('#bdmm').val("27.1"); break;
        case "25": $('#bdmm').val("27.1"); break;
        case "32": $('#bdmm').val("37.1"); break;
        case "40": $('#bdmm').val("47.1"); break;
    }
});
  

Вы могли бы использовать объект поиска —

 var obj = new Object();
obj['15'] = '17.1';
obj['20'] = '27.1';
//etc
  

Затем ваш код изменения можно упростить до —

  $('#pipe_size').change(function() {
      // update input box with the currently selected value
      $('#bdmm').val(obj[this.value]);
 });