将两个select标记的值放在<output>,html </output>中

时间:2014-04-07 14:25:33

标签: javascript html css

我有两个选择标记,我希望当用户在每个select标记中选择一个值时,输出显示两个值:

例如,如果在第一个标记中有人选择cars并在seccon golf中, 我希望在输出中有表达式cars,golf ..我该怎么做?请帮帮我

3 个答案:

答案 0 :(得分:1)

这是一个粗略的想法,您需要根据需要进行优化

<script type="text/javascript">

            $(function(){

            var sb1_val;
            var sb2_val;

             $('#sb1').on('change', function() 
             {
                sb1_val = this.value ;
             });

             $('#sb2').on('change', function()
             {
                sb2_val = this.value ;

                 console.log(sb1_val+','+sb2_val); //this will output the both
                 alert(sb1_val+','+sb2_val); //this will output the both

             });

            });


        </script>


    <select id='sb1'>
        <option value='car1'>car1</option>
        <option value='car2'>car2</option>

    </select>


    <select id='sb2'>
        <option value="golf1">golf1</option>
        <option value='golf2'>golf2</option>

    </select>

DEMO

答案 1 :(得分:1)

这是纯JavaScript中的demo

我建议的解决方案是捕获onchange事件,并使用innerHTML将其显示在div标记中。

HTML:

<select id="select1">
   <option> cars </option>
   <option> bikes </option>
</select>
<div id="output"></div>

JavaScript的:

document.getElementById("select1").onchange=function(){
    var e = document.getElementById("select1");
    selected1  = e.options[e.selectedIndex].text;
    if(selected2!="")
       document.getElementById("output").innerHTML = selected1 + ", " + selected2;

};

答案 2 :(得分:0)

只需在jQuery中使用.change()

$("select").change(function(){
    //output the values
    $("#my_output").val($("#s1").val() + "," + $("#s2").val());
});

demo here