用jQuery找出选择框的值

Question

我对jQuery真的很陌生，所以很抱歉，如果这很简单，但是我有一个选择框，里面有值。 此刻，它显示一个div。

<div class="three columns"><select name="selectbox1" id="selectbox1" style="width:60px;"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div>

<div class="twelve columns" id="itemadd"><p class="itemadd">You have sucessfully added a child seat at 3 Euros per day.</p></div>

还有一个简单的隐藏功能：

$('#itemadd').hide();
        $('#selectbox1').change(function() {
            $('#itemadd').show();
        });

我希望能够找出selectbox的值并将其用于变量中，因此我可以显示更多交互性消息并将其用于定价。

$("#selectbox1").change(function() {
    var id = $(this).val();
}); 

我尝试了类似的方法，但似乎不起作用。

我想要做的就是选择一个select并将其值设为4，例如，我希望能够知道这一点并将其放入变量中，以便可以重用它。 在消息或总和中。

Answer 1

如果要使用其他函数中变量'id'的值，请在jquery处理程序的外部声明'id'变量。

例如：

var id ;
        $('#itemadd').hide();

        $('#selectbox1').change(function() {
        $('#itemadd').show();

        });


       $("#selectbox1").change(function() {

              id = $(this).val();
              call();  

             });

           function call()
          {
             alert(id); //use the value here
          }

Answer 2

您可以尝试使用以下代码：

$(document).ready(function(){
    $('#selectbox1').change(function() {
    var valueSelected=$("#selectbox1 option:selected").val();
    $('#itemadd').text("You have sucessfully added a child seat at "+valueSelected+" Euros per day.");
    $('#itemadd').show();
});

Answer 3

检查以下代码

1）在HTML中，我添加了一个span标签作为占位符以显示所选的值。

2）最初我正在hiding itemadd部分。 On change选择框后，我得到了所选值并将其存储 在变量selvalue 。 这个存储的变量值，我正在使用text()函数在span标记内显示它。 最后，我将显示整个itemadd部分。

见演示

HTML：

<div class="three columns">
   <select name="selectbox1" id="selectbox1" style="width:60px;">
      <option>0</option><option>1</option>
      <option>2</option><option>3</option>
      <option>4</option><option>5</option>
    </select>
</div>

<div class="twelve columns" id="itemadd">
   <p class="itemadd">You have sucessfully added a child seat at <span class="selected-val">3 </span>  per day.</p>
</div>

脚本：

$('#itemadd').hide();
    $('#selectbox1').change(function() {
         var selvalue= $(this).val();           
        $(".selected-val").text(selvalue);
        $('#itemadd').show();
    });

Answer 4

应该是这样的。

$("#selectbox1").change(function() {
    var select_val = $("#selectbox1").val();
    alert(select_val);
}); 

Answer 5

$(function(){
    $("#selectbox1").change(function() {
        var val = $(this).children(":selected").html();
    }); 
});

工作js提琴

Answer 6

$("#selectBox option:selected").val() //获取所选选项的值

$("#selectBox option:selected").text() //获取选择的文本