我有3个链接，它们用不同的选项填充选择字段。如果textlabel是活动的，并且有人单击链接selectlist1或其他，则必须激活selectlabel。我该怎么办？
<!doctype html>
<html>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<script>
var selectData = {
"sel1":{
"100":"select100", // selectdaten
"101":"select101",
"102":"select102",
"103":"select103",
"104":"select104"
},
"sel2":{
"201":"select201",
"202":"select202",
"203":"select203",
"204":"select204",
"205":"select205"
},
"sel3":{
"301":"select301",
"302":"select302",
"303":"select303",
"304":"select304",
"305":"select305"
}
};
jQuery(document).ready(function ($) {
$(document).on('click', '.selectin', function (event) {
event.preventDefault();
var b = $(this),
buttonId=b.attr('id'),
selectSet = selectData[buttonId],
selectField = $('#selectin');
selectField.empty();
if(selectSet){
$.each(selectSet,function(k,v){
selectField.append($('<option>', {value:k, text:v}));
});
}
return false;
});
});
</script>
<li><a href="#" id="sel1" class="selectin">Selectlist1</a></li>
<li><a href="#" id="sel2" class="selectin">Selectlist2</a></li>
<li><a href="#" id="sel3" class="selectin">Selectlist3</a></li>
<form method="post" name="multiform" id="form8" action="" onchange="toggleRadio();">
<label for="radio1">INPUT Text</label>
<input id="radio1" type="radio" name="select" checked />
<label for="radio2">SELECT from</label>
<input id="radio2" name="select" type="radio" />
<label id="textLabel" for="textin">Formular
<input id="textin" type="text" placeholder="test1" />
</label>
<label id="selectLabel" for="selectin">Items
<select id="selectin">
<option selected></option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
</select>
</label>
</form>
<script>
function toggleRadio() { // will activate when the form will change.
var radio1 = document.getElementById('radio1'); // radio 1
var radio2 = document.getElementById('radio2'); // radio 2
if (radio1.checked == true) { // if the first checked display input and hide select
document.getElementById('textLabel').style.display = 'block';
document.getElementById('selectLabel').style.display = 'none';
document.getElementById('selectin').selectedIndex = 0; // clear selected option
}
else { // because you got only 2 option you don't have to use another condition
document.getElementById('textLabel').style.display = 'none';
document.getElementById('selectLabel').style.display = 'block';
document.getElementById('textin').value = ''; // clear input
}
}
toggleRadio(); // call the function
</script>
</body>
</html>
我有3个链接，它们用不同的选项填充选择字段。如果textlabel是活动的，并且有人单击链接selectlist1或其他，则必须激活selectlabel。我该怎么办？
答案 0 :(得分：0)
在您选择的点击中插入此代码；
var radio2 = document.getElementById('radio2');
if(radio2.checked == false){
radio2.checked = true;
toggleRadio();
}
这将检查radio2是否被选中，否则将对其进行切换并调用您的函数以显示选择字段。运行代码段，谢谢。
<!doctype html>
<html>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<script>
var selectData = {
"sel1": {
"100": "select100", // selectdaten
"101": "select101",
"102": "select102",
"103": "select103",
"104": "select104"
},
"sel2": {
"201": "select201",
"202": "select202",
"203": "select203",
"204": "select204",
"205": "select205"
},
"sel3": {
"301": "select301",
"302": "select302",
"303": "select303",
"304": "select304",
"305": "select305"
}
};
jQuery(document).ready(function($) {
$(document).on('click', '.selectin', function(event) {
var radio2 = document.getElementById('radio2');
if (radio2.checked == false) {
radio2.checked = true;
toggleRadio();
}
event.preventDefault();
var b = $(this),
buttonId = b.attr('id'),
selectSet = selectData[buttonId],
selectField = $('#selectin');
selectField.empty();
if (selectSet) {
$.each(selectSet, function(k, v) {
selectField.append($('<option>', {
value: k,
text: v
}));
});
}
return false;
});
});
</script>
<li><a href="#" id="sel1" class="selectin">Selectlist1</a></li>
<li><a href="#" id="sel2" class="selectin">Selectlist2</a></li>
<li><a href="#" id="sel3" class="selectin">Selectlist3</a></li>
<form method="post" name="multiform" id="form8" action="" onchange="toggleRadio();">
<label for="radio1">INPUT Text</label>
<input id="radio1" type="radio" name="select" checked />
<label for="radio2">SELECT from</label>
<input id="radio2" name="select" type="radio" />
<label id="textLabel" for="textin">Formular
<input id="textin" type="text" placeholder="test1" />
</label>
<label id="selectLabel" for="selectin">Items
<select id="selectin">
<option selected></option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
</select>
</label>
</form>
<script>
function toggleRadio() { // will activate when the form will change.
var radio1 = document.getElementById('radio1'); // radio 1
var radio2 = document.getElementById('radio2'); // radio 2
if (radio1.checked == true) { // if the first checked display input and hide select
document.getElementById('textLabel').style.display = 'block';
document.getElementById('selectLabel').style.display = 'none';
document.getElementById('selectin').selectedIndex = 0; // clear selected option
} else { // because you got only 2 option you don't have to use another condition
document.getElementById('textLabel').style.display = 'none';
document.getElementById('selectLabel').style.display = 'block';
document.getElementById('textin').value = ''; // clear input
}
}
toggleRadio(); // call the function
</script>
</body>
</html>