javascript - Get Selected Text in Array - Stack Overflow

admin管理员组

文章数量:1430924

I have a dropdown and a textbox. When the user selects any option in the dropdown, it changes the text in the textbox. My question is, how can I get the selected value in an array and set the corresponding text from an array?

I have the code up and running like this:

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

I think ^this code can be made more efficient and cleaner with the use of arrays. Any pointers, please?

I have a dropdown and a textbox. When the user selects any option in the dropdown, it changes the text in the textbox. My question is, how can I get the selected value in an array and set the corresponding text from an array?

I have the code up and running like this:

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

I think ^this code can be made more efficient and cleaner with the use of arrays. Any pointers, please?

• javascript
• arrays
• select
• jquery

Share Improve this question Follow edited Nov 10, 2011 at 16:49 Samuel Liew 79.2k111111 gold badges169169 silver badges304304 bronze badges asked Nov 10, 2011 at 16:38 inputinput 7,5292525 gold badges9797 silver badges150150 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

It might would make your life much better if the values matched somewhat:

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/maniator/qRqLt/

I'm assuming you need to send "pipe_size" to the server, otherwise you can just store the data in the value attribute. If so, there are a few approaches you could take. From least to most desirable:

1) Use a 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) Use an object:

$('#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) Use data elements and store the mapping in the array:

<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>

Why don't you save the value into a variable, and use a switch statement instead?

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

You could use a look-up object -

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

Then your change code could be simplified to -

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

本文标签： javascriptGet Selected Text in ArrayStack Overflow