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

小提琴：http://jsfiddle.net/maniator/qRqLt/

Answer 2

我假设您需要将“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>

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

获取数组中的选定文本

4 个答案: