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?

Answer 1

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/