通过单击激活选择字段

我有 3 个链接，它们用不同的选项填充选择字段。如果文本标签处于活动状态，并且有人单击链接 selectlist1 或其他链接，则必须激活选择标签。我该怎么做？

<!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>

在选择点击时插入此代码;

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>

相关内容

最新更新

热门标签：