如何实现表单里的select值与input关联？
先在select预存 几项option值分别为A、B、C、D。当我要选择A时另一input值为100.当选择B时的input值为200，C为300,D为400、且input值显示为只读，不可修改。
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签，输入js代码：$('select').change(function () {$('input').val($('select').val());});。
3、浏览器运行index.html页面，此时select选择的选项变化时，它的值会自动关联到input输入框中。
温馨提示：答案为网友推荐，仅供参考
第1个回答 2012-03-06
假设input的id是inp
定义如下方法:
function changeInpue(select){
var valSelect = select.value;
if("A"==valSelect){
document.getElementById("inp").value=100;
}else if("B"==valSelect){
document.getElementById("inp").value=200;
}else if("C"==valSelect){
document.getElementById("inp").value=300;
}else if("D"==valSelect){
document.getElementById("inp").value=400;
}
}
然后在select上定义onchange="changeInput(this)",在input上定义readonly="readonly"或readonly="true"
定义如下方法:
function changeInpue(select){
var valSelect = select.value;
if("A"==valSelect){
document.getElementById("inp").value=100;
}else if("B"==valSelect){
document.getElementById("inp").value=200;
}else if("C"==valSelect){
document.getElementById("inp").value=300;
}else if("D"==valSelect){
document.getElementById("inp").value=400;
}
}
然后在select上定义onchange="changeInput(this)",在input上定义readonly="readonly"或readonly="true"
第2个回答 推荐于2018-03-05
直接上代码(另存为html就可以看到了):
<html>
<head>
</head>
<body>
<select id="slList" onchange="selectShow()">
<option value="100">A</option>
<option value="200">B</option>
<option value="300">C</option>
<option value="400">D</option>
</select>
<input type="text" id="txtShow" readonly="true" />
<script>
window.onload=selectShow;
function selectShow(){
document.getElementById("txtShow").value=document.getElementById("slList").value;
}
</script>
</body>
</html>本回答被提问者和网友采纳
<html>
<head>
</head>
<body>
<select id="slList" onchange="selectShow()">
<option value="100">A</option>
<option value="200">B</option>
<option value="300">C</option>
<option value="400">D</option>
</select>
<input type="text" id="txtShow" readonly="true" />
<script>
window.onload=selectShow;
function selectShow(){
document.getElementById("txtShow").value=document.getElementById("slList").value;
}
</script>
</body>
</html>本回答被提问者和网友采纳
第3个回答 2012-03-06
//A为select 控件ID B为input控件ID
var value= $('#A').val();
$('#B').val(value);
两句代码！
写个select 单击事件！
var value= $('#A').val();
$('#B').val(value);
两句代码！
写个select 单击事件！
第4个回答 2012-03-06
网上随便找个二级联动的demo看一下就明白了.
相似回答