我有如下所示的选择框列表。我想访问从下到上第一个选择框的名称,其中选择了值“a”。
当 sb3 选择了值 = b 时,如果 sb2 选择了值 =a 我想要 o 得到这个,否则如果 sb1 选择了值 =a 我想要 o 得到这个
当 sb2 选择了值 =b 那么如果 sb1 选择了值 =a 我想要 o 得到这个,就像这样
我已经尝试过
console.log( $("[name^='sb'] option[value='a']:selected").closest('select').attr("name") );
或
console.log( $(this).parent().closest( "[name^='sb'] option[value='ana']" ).attr("name") );
示例选择列表;
<select name="sb1" >
<option value="a"></option>
<option value="b"></option>
</select>
<select name="sb2" >
<option value="a"></option>
<option value="b"></option>
</select>
<select name="sb3" >
<option value="a"></option>
<option value="b"></option>
</select>
编辑另一个示例;
i want to get closest item prior to selested item.
sb45=a
sb46=a
sb47=b --> this give me sb46
sb48=b --> this give me sb46
sb49=a
sb50=b --> this give me sb49
thanks for help.
最佳答案
您必须创建一个递归函数,迭代抛出上一个元素并使用 value == a
搜索 select,否则没有人选择。
function getRecursivePrevName($node) {
$sb = $($node).prev("[name^='sb']");
if($sb.length) {
if($sb.val()=="a") return $sb.attr("name")
else return getRecursivePrevName($sb);
}
else return null;
}
附加更改处理程序将显示 sb* 已被选择(优先级从上到下)
请参阅下面的代码片段:
$("[name^='sb']").on("change", function() {
if($(this).val() !== 'a') {
var value = getRecursivePrevName($(this));
console.log(value);
if(value != null )
$("#selected").html("select sb is <span style='color:red'>" + value + "</span>");
else $("#selected").html("no select has value a");
}else {
console.log($(this).attr("name"));
$("#selected").html("select sb is <span style='color:red'>" + $(this).attr("name") + "</span>");
}
});
function getRecursivePrevName($node) {
$sb = $($node).prev("[name^='sb']");
if($sb.length) {
if($sb.val()=="a") return $sb.attr("name")
else return getRecursivePrevName($sb);
}
else return null;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="sb1">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="sb2">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="sb3">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="sb4">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="sb5">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="sb6">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<br><br>
<div id="selected">
<div>
关于javascript - 我如何使用 jquery 访问具有 value=xx 的所选项目名称的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49047653/