在这里我有三个下拉列表 drange value value ,代码看起来如下。
要使用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(),
}
脚本的问题是,您在提取以发布到服务器的值时没有处理无线电按钮和下拉。
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来获得价值。eg#abc_type_1,#abc_type_2,#abc_type_3
您将 default 值添加到inputs
中,并添加 function 在选择更改时运行的像这样代码:
$(".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>
这就是您可以获取当前选择框值
的方式最简单的示例
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
});