Get Selected Text in Array

Question

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?

Naftali · Accepted Answer · 2011-11-10 16:43:07Z

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

answered Nov 10, 2011 at 16:43

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Nickel · Accepted Answer · 2011-11-10 17:01:30Z

3

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>

edited Nov 10, 2011 at 17:01

answered Nov 10, 2011 at 16:50

Brian Nickel

27.6k5 gold badges83 silver badges112 bronze badges

2 Comments

Naftali Over a year ago

Why use $("#pipe_size option:selected").text()? just use this.value (in your examples) and you will be golden ^_^

Brian Nickel Over a year ago

You're right. I just hastily copied from the question. I'l update.

samliew · Accepted Answer · 2011-11-10 16:42:48Z

2

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

answered Nov 10, 2011 at 16:42

samliew

79.5k112 gold badges173 silver badges319 bronze badges

1 Comment

Blazemonger Over a year ago

Good approach, but still too much repeated code. Just store a new variable and do something like $('#bdmm').val(myvar); at the end of the switch.

ipr101 · Accepted Answer · 2011-11-10 16:59:08Z

2

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

edited Nov 10, 2011 at 16:59

answered Nov 10, 2011 at 16:49

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

2 Comments

Naftali Over a year ago

Why use $("#pipe_size option:selected").text()? just use this.value (in your example) and you will be golden ^_^

ipr101 Over a year ago

@Neal - excellent point! I'd missed that, answer updated accordingly.

Collectives™ on Stack Overflow

Get Selected Text in Array

4 Answers 4

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related