在數組中獲取所選文本

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：

​​

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

Answer 2

爲什麼不將值保存到變量中，而是使用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 3

您可以使用查找對象 -

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

Answer 4

我假設你需要發送「PIPE_SIZE」到服務器，否則你只能將數據存儲在值屬性中。如果是這樣，你可以採取一些方法。從最低到最高期望：

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>