获取数组中选定的文本

Question

我有一个下拉菜单和一个文本框。当用户选择下拉列表中的任何选项时，它会更改文本框中的文本。我的问题是，如何获取数组中的选定值并从数组中设置相应的文本？

我的代码如下所示：

<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");
    }
});

我认为^可以制作此代码使用数组更高效、更干净。请问有什么指点吗？

Answer 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);
        });

Fiddle: http://jsfiddle。网/manianator/qRqLt/

Answer 2

我假设您需要将“pipe_size”发送到服务器，否则您可以将数据存储在 value 属性中。如果是这样，您可以采取一些方法。从最不理想到最理想：

1）使用 switch case：

$('#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>

Answer 3

为什么不将值保存到变量中，而使用 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;
    }
});

Answer 4

您可以使用查找对象 -

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]);
 });