通过jquery获取选择框的期望值答案

【问题标题】：Get desired value of selectbox through jquery通过jquery获取选择框的期望值
【发布时间】：2018-02-19 12:56:06
【问题描述】：

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

要使用 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(),
                  }

【问题讨论】：

我没有看到您在任何地方读取任何这些选择字段的值...
您在代码input[name=select_type中指的是什么输入
@CarstenLøvboAndersen 我更新了我的问题，请看一下
仍然不清楚你在问什么。当更改事件触发时，您唯一读取的值是 input[name=select_type]:radio。
@CBroe 正在读取剩余代码中的这些值，但为了程序的简单性我没有添加它，name_type 中的值正在调用

标签： javascript php jquery select codeigniter-3

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您将 default 值添加到 inputs 并添加 function 在 selects change 时运行，如下代码：

$(".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>

【讨论】：

谢谢我在这里使用了你的代码，但总是将第一次使用的name_type 的值传递给 ajax form_data
检查我编辑了您的代码并添加了alert(name_type.val()); 始终获取该警报中第一个选择框的值

【解决方案3】：

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

最简单的例子

HTML

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

jQuery

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

【讨论】：