通过 jquery 获取选择框的所需值

Question

这里我有三个具有不同值的下拉列表，代码如下所示。

要使用 jquery 获取相应下拉列表的值，我有这个，但它总是获得相同的值，请查看

 $(".one").hide(); $(".two").hide(); $(".three").show(); var name_type=$("#abc_type_1").attr('name','type'); $("#abc_type_2").removeAttr('name'); $("#abc_type_3").removeAttr('name'); $("input[name=select_type]:radio").change(function () { if($(this).val()=='1') { $(".one").show(); $(".two").hide(); $(".three").hide(); var name_type=$("#abc_type_1").attr('name','type'); $("#abc_type_2").removeAttr('name'); $("#abc_type_3").removeAttr('name'); } else if($(this).val()=='2') { $(".one").hide(); $(".two").show(); $(".three").hide(); var name_type=$("#abc_type_2").attr('name','type'); $("#abc_type_1").removeAttr('name'); $("#abc_type_3").removeAttr('name'); } else if($(this).val()=='3') { $(".one").hide(); $(".two").hide(); $(".three").show(); var name_type=$("#abc_type_3").attr('name','type'); $("#abc_type_1").removeAttr('name'); $("#abc_type_2").removeAttr('name'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left_1"> <input class="magic-radio" type="radio" name="select_type" id="1" value="1"> <label for="1">1</label> <input class="magic-radio" type="radio" name="select_type" id="2" value="2"> <label for="2">2</label> <input class="magic-radio" type="radio" name="select_type" id="3" checked value="3"> <label for="3">3</label> </div> <div class="left_2 one"> <select name="type" id="abc_type_1" class="form-control abc_type"> <option value="A">LSK-A</option> <option value="B">LSK-B</option> <option value="C">LSK-C</option> </select> </div> <div class="left_2 two"> <select name="type" id="abc_type_2" class="form-control abc_type"> <option value="AB">LSK-AB</option> <option value="AC">LSK-AC</option> <option value="BC">LSK-BC</option> </select> </div> <div class="left_2 three"> <select name="type" id="abc_type_3" class="form-control abc_type"> <option value="super">LSK-SUPER</option> <option value="box">BOX-K</option> </select> </div>

在这里我想获取所选选择框的值但我无法获取正确的值，请帮我解决。

var form_data={      
                    agent_name: $('#agent_name').val(),
                    number: $('#number').val(),
                    number_from: $('#number_from').val(),
                    number_to: $('#number_to').val(),
                    quantity: $('#quantity').val(),
                    amount: $('#amount').val(),
                    date: $('#date').val(),
                    commision: $('#commision').val(),
                    profit: $('#profit').val(),
                    agent_amount: $('#agent_amount').val(),
                    user_id: $('#user_id').val(),
                    type: name_type.val(),
                  }

Answer 1

您向inputs添加默认值并添加在选择更改时运行的函数，如下代码：

 $(".one").hide(); $(".two").hide(); $(".three").show(); var name_type = $("#abc_type_1").attr('name', 'type'); $("#abc_type_2").removeAttr('name'); $("#abc_type_3").removeAttr('name'); $("input[name=select_type]:radio").change(function() { if ($(this).val() == '1') { $(".one").show(); $(".two").hide(); $(".three").hide(); var name_type = $("#abc_type_1").attr('name', 'type'); $("#abc_type_2").removeAttr('name'); $("#abc_type_3").removeAttr('name'); } else if ($(this).val() == '2') { $(".one").hide(); $(".two").show(); $(".three").hide(); var name_type = $("#abc_type_2").attr('name', 'type'); $("#abc_type_1").removeAttr('name'); $("#abc_type_3").removeAttr('name'); } else if ($(this).val() == '3') { $(".one").hide(); $(".two").hide(); $(".three").show(); var name_type = $("#abc_type_3").attr('name', 'type'); $("#abc_type_1").removeAttr('name'); $("#abc_type_2").removeAttr('name'); } }); $("select").change(function(e){ alert(e.target.value); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left_1"> <input class="magic-radio" type="radio" name="select_type" id="1" value="1"> <label for="1">1</label> <input class="magic-radio" type="radio" name="select_type" id="2" value="2"> <label for="2">2</label> <input class="magic-radio" type="radio" name="select_type" id="3" checked value="3"> <label for="3">3</label> </div> <div class="left_2 one"> <select name="type" id="abc_type_1" class="form-control abc_type"> <option value="">Select value</option> <option value="A">LSK-A</option> <option value="B">LSK-B</option> <option value="C">LSK-C</option> </select> </div> <div class="left_2 two"> <select name="type" id="abc_type_2" class="form-control abc_type"> <option value="">Select value</option> <option value="AB">LSK-AB</option> <option value="AC">LSK-AC</option> <option value="BC">LSK-BC</option> </select> </div> <div class="left_2 three"> <select name="type" id="abc_type_3" class="form-control abc_type"> <option value="">Select value</option> <option value="super">LSK-SUPER</option> <option value="box">BOX-K</option> </select> </div>

Answer 2

脚本的问题在于您在提取用于发布到服务器的值时没有处理单选按钮和下拉列表。

JS

var form_data = {
      agent_name: $('#agent_name').val(),
      number: $('#number').val(),
      number_from: $('#number_from').val(),
      number_to: $('#number_to').val(),
      quantity: $('#quantity').val(),
      amount: $('#amount').val(),
      date: $('#date').val(),
      commision: $('#commision').val(),
      profit: $('#profit').val(),
      agent_amount: $('#agent_amount').val(),
      user_id: $('#user_id').val(),
      type: $("#abc_type_"+$("input[name=select_type]:checked").val()).val()
   };

只需用上面的脚本替换你的 form_data 。 如果不起作用，请告诉我。

这部分从单选按钮获取检查值。

$("input[name=select_type]:checked").val()

回应是这样的。 1 或 2 或 3。

$("#abc_type_"+$("input[name=select_type]:checked").val()).val()

现在 jquery 将通过定位 ID 来获取价值。 例如#abc_type_1、#abc_type_2、#abc_type_3

Answer 3

这是获取当前选择框值的方法

最简单的例子

HTML

<select class="select1_class_name" id="select1" data-userid="1">
<option value="1">1</option>
</select>

查询

$('#select1').change(function() {
var id = $(this).data('userid');
console.log(id); //you will get on change of selected dropdown
});