如何 select 基于文本变量的 MultipleChoice 选项
How to select a MultipleChoice option based on text variable
我有一个 MultipleChoiceField 和一个变量 my_choice = 'mystring'
我想检查相对于 my_choice
的选项
这是我的 html
:
ul id="id_layer_select"><li><label for="id_layer_select_0"><input checked="checked" id="id_layer_select_0" name="layer_select" type="checkbox" value="1" /> <span style='font-weight:normal'>Mychoice1</span></label></li>
<li><label for="id_layer_select_1"><input id="id_layer_select_1" name="layer_select" type="checkbox" value="2" /> <span style='font-weight:normal'>Mychoice2</span></label></li>
<li><label for="id_layer_select_2"><input id="id_layer_select_2" name="layer_select" type="checkbox" value="3" /> <span style='font-weight:normal'>Mychoice3</span></label></li> [...]</ul>
这是我的 javascript
:
var my_choice = 'mystring'
var opt = $("#id_layer_select option");
opt.filter("[value=my_choice]").attr("selected", true);
我可以使用 jquery。谢谢
PS:偏离路线 mystring
是一个选项 Mychoice1
或 Mychoice2
等等
我不想使用 id_layer_select_x
并且我不想添加和属性。
问题是复选框未选中并且
console.log(opt)=Object { length: 0, prevObject: Object[1] }
您可以按它们包含的文本过滤所有范围。然后您可以获取前一个元素并检查它。
$(document).ready(function() {
var txt = "Mychoice3";
var labelMatchingTxt = $('#id_layer_select span').filter(function(i, el) {
return txt === el.childNodes[0].nodeValue; // avoiding DOM reselection.
}).prev().prop('checked', true);
});
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<ul id="id_layer_select"><li><label for="id_layer_select_0"><input id="id_layer_select_0" name="layer_select" type="checkbox" value="1" /> <span style='font-weight:normal'>Mychoice1</span></label></li>
<li><label for="id_layer_select_1"><input id="id_layer_select_1" name="layer_select" type="checkbox" value="2" /> <span style='font-weight:normal'>Mychoice2</span></label></li>
<li><label for="id_layer_select_2"><input id="id_layer_select_2" name="layer_select" type="checkbox" value="3" /> <span style='font-weight:normal'>Mychoice3</span></label></li> [...]</ul>
</body>
我有一个 MultipleChoiceField 和一个变量 my_choice = 'mystring'
我想检查相对于 my_choice
这是我的 html
:
ul id="id_layer_select"><li><label for="id_layer_select_0"><input checked="checked" id="id_layer_select_0" name="layer_select" type="checkbox" value="1" /> <span style='font-weight:normal'>Mychoice1</span></label></li>
<li><label for="id_layer_select_1"><input id="id_layer_select_1" name="layer_select" type="checkbox" value="2" /> <span style='font-weight:normal'>Mychoice2</span></label></li>
<li><label for="id_layer_select_2"><input id="id_layer_select_2" name="layer_select" type="checkbox" value="3" /> <span style='font-weight:normal'>Mychoice3</span></label></li> [...]</ul>
这是我的 javascript
:
var my_choice = 'mystring'
var opt = $("#id_layer_select option");
opt.filter("[value=my_choice]").attr("selected", true);
我可以使用 jquery。谢谢
PS:偏离路线 mystring
是一个选项 Mychoice1
或 Mychoice2
等等
我不想使用 id_layer_select_x
并且我不想添加和属性。
问题是复选框未选中并且
console.log(opt)=Object { length: 0, prevObject: Object[1] }
您可以按它们包含的文本过滤所有范围。然后您可以获取前一个元素并检查它。
$(document).ready(function() {
var txt = "Mychoice3";
var labelMatchingTxt = $('#id_layer_select span').filter(function(i, el) {
return txt === el.childNodes[0].nodeValue; // avoiding DOM reselection.
}).prev().prop('checked', true);
});
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<ul id="id_layer_select"><li><label for="id_layer_select_0"><input id="id_layer_select_0" name="layer_select" type="checkbox" value="1" /> <span style='font-weight:normal'>Mychoice1</span></label></li>
<li><label for="id_layer_select_1"><input id="id_layer_select_1" name="layer_select" type="checkbox" value="2" /> <span style='font-weight:normal'>Mychoice2</span></label></li>
<li><label for="id_layer_select_2"><input id="id_layer_select_2" name="layer_select" type="checkbox" value="3" /> <span style='font-weight:normal'>Mychoice3</span></label></li> [...]</ul>
</body>