javascript - Merge select box selects values - Stack Overflow

admin管理员组

文章数量:1391734

I have 3 select boxes and one input.

I need to merge the selected values together and add it to the hidden input box.

For example:

<select name="select-choice-1" id="select-choice-1">
            <option value="1-">1</option>
</select>

<select name="select-choice-1" id="select-choice-2">
            <option value="5-">5</option>
</select>

<select name="select-choice-1" id="select-choice-3">
            <option value="2011">2011</option>
</select>

Finally I want to get:

Is this case the value would be:

1-5-2011

How could I get this functionality togehter please?

I have 3 select boxes and one input.

I need to merge the selected values together and add it to the hidden input box.

For example:

<select name="select-choice-1" id="select-choice-1">
            <option value="1-">1</option>
</select>

<select name="select-choice-1" id="select-choice-2">
            <option value="5-">5</option>
</select>

<select name="select-choice-1" id="select-choice-3">
            <option value="2011">2011</option>
</select>

Finally I want to get:

Is this case the value would be:

1-5-2011

How could I get this functionality togehter please?

• javascript
• jquery
• html

Share Improve this question Follow asked May 26, 2011 at 14:21 Satch3000Satch3000 49.5k9090 gold badges225225 silver badges349349 bronze badges 1

• When do you need to do it? When the selected values change? What have you tried so far? – Richard Dalton Commented May 26, 2011 at 14:26

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

JSFiddle Demo:

one way to do it is:

HTML:

<select name="select-choice-1" id="select-choice-1">
    <option value="1-">1</option>
    <option value="2-">2</option>
    <option value="3-">3</option>
</select>

<select name="select-choice-1" id="select-choice-2">
    <option value="5-">5</option>
    <option value="6-">6</option>
    <option value="7-">7</option>
</select>

<select name="select-choice-1" id="select-choice-3">
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
</select>
<input type='hidden' id='myhidden' value='' />

JavaScript:

<script type='text/javascript'>
   $(document).ready(function() {
    $('select').each(function() {
        $(this).change(function() {
            var myele = '';
            $.each($('select option:selected'), function() {
                myele += $(this).val();
            });
            $('#myhidden').val(myele);
            console.log($('#myhidden').val());
        });
    });
   }); 
</script>

Modified w/ onchange.

If you want the code to be flexible enough to work with an arbitrary number of <select> elements, you can write something like:

$("#yourInputBoxId").val($("[id^=select-choice-]").map(function() {
    return $(this).val();
}).get().join(""));

Here, map() will project into an array the selected values of all the <select> elements whose id attributes begin with select-choice-. The array items are then concatenated into a string, without a separator (since the values already contain one).

$( "#id_of_hidden_input" ).val( 
    $( "#select-choice-1" ).val() + 
    $( "#select-choice-2" ).val() + 
    $( "#select-choice-3" ).val()
);

you get always use php by POST or get

change the names

<select name="select-choice-1" id="select-choice-1">
            <option value="1-">1</option>
</select>

<select name="select-choice-2" id="select-choice-2">
            <option value="5-">5</option>
</select>

<select name="select-choice-3" id="select-choice-3">
            <option value="2011">2011</option>
</select>


$choice1 = $_POST['select-choice-1'];
$choice2 = $_POST['select-choice-2'];
$choice3 = $_POST['select-choice-3'];
echo $choice ."-".$choice2 ."-".$choice3;

You'll want to use the selectedIndex and options properties of the select element. Here is a quick example:

var elm1 = document.getElementById("select-choice-1"),
    elm2 = document.getElementById("select-choice-2"),
    elm3 = document.getElementById("select-choice-3"),
    sel1 = elm1.options[elm1.selectedIndex].value,
    sel2 = elm2.options[elm2.selectedIndex].value,
    sel3 = elm3.options[elm3.selectedIndex].value;
alert( sel1 + sel2 + sel3);

    var $selects = $('#select_box_1,#select_box_2,#select_box_3');
    var seperator = '-';

    $selects.change(function() {
      var val = [];
      $selects.each(function() {
        val.push($(this).val());
      });

      $('#hidden_input').val(val.join(seperator));
    }).trigger('change');

This allows for any number of selectbox values to be concatinated with a seperator of your choice. The .trigger('change); causes the bound .change(...) event to fire and concatinate the values on page load (just in case the form ha been submitted and the selectboxes prefilled)

本文标签： javascriptMerge select box selects valuesStack Overflow