根据所选值更改表单输入
Change form inputs based on selected values
我有 3 个字段：publishers在单选按钮中，cities name在下拉列表中，images新闻报纸。
当我选择单选按钮时，城市下拉列表会相应地变化，当我们选择特定城市时，新闻报纸的图像会根据所选城市出现，这怎么可能？
我使用的代码是当我们选择另一个发布者代码时
代码第一次工作时代码不适用于图像：<html>
<title>index</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var listA =[{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Banglore', value:'Banglore'}, {name:'Chennai', value:'Chennai'}, {name:'Delhi', value:'Delhi'}, {name:'Hyderabad', value:'hyderabad'}, {name:'Jaipur', value:'Jaipur'}, {name:'Kochi', value:'Kochi'}, {name:'Kolkata', value:'Kolkata'}, {name:'Lucknow', value:'Lucknow'}, {name:'Mumbai', value:'Mumbai'}, {name:'NaviMumbai', value:'NaviMumbai'}, {name:'Pune', value:'Pune'}, {name:'Thane', value:'Thane'}];
var listB = [{name:'Banglore', value:'Banglore'}, {name:'Delhi', value:'Delhi'}, {name:'Kolkata', value:'Kolkata'}, {name:'Mumbai', value:'Mumbai'}];
var listC = [{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Mumbai', value:'Mumbai'}, {name:'Banglore', value:'Banglore'}, {name:'Pune', value:'Pune'}];
var listD = [{name:'Ahmednagar', value:'Ahmednagar'}, {name:'Aurangabad', value:'Aurangabad'}, {name:'Jalgaon', value:'Jalgaon'}, {name:'Kolhapur', value:'Kolhapur'}, {name:'Mumbai', value:'Mumbai'}, {name:'Nagpur', value:'Nagpur'}, {name:'Nashik', value:'Nashik'}, {name:'Pune', value:'Pune'}];
var listE = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
var listF = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
var listG = [{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Nav Gujrat Et Wealth', value:'Nav_Gujrat_Et_Wealth'}];
var listH = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
$(document).ready( function() {
$("input[name='chk']").on('change',function() {
if($(this).is(':checked') && $(this).val() == 'toi')
{
$('#describe').empty()
$.each(listA, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'tet')
{
$('#describe').empty()
$.each(listB, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'mirror')
{
$('#describe').empty()
$.each(listC, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'mht')
{
$('#describe').empty()
$.each(listD, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'nbt')
{
$('#describe').empty()
$.each(listE, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'eis')
{
$('#describe').empty()
$.each(listF, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'ngs')
{
$('#describe').empty()
$.each(listG, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'vke')
{
$('#describe').empty()
$.each(listH, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else
{
}
});
});
</script>
<style type="text/css">
body{ margin:0; padding:0;}
.header{ width:100%; border-bottom:4px solid #0099ff;}
.headerin{ width: 710px; margin:0 auto; }
.divOuter {
background: none repeat scroll 0 0 #f9f9f9;
border: 2px solid #fff;
border-radius: 10px;
box-shadow: 0 5px 5px #ddd;
margin: 28px auto;
padding:50px 20px;
width: 710px;
}
.clr{ clear:both;}
.left_feilds{ float:left; width:275px;}
.left_right{ float:left;}
.forms{ float:left; margin:128px 0 0 0;}
#describe{ padding:3px 10px; width:150px; float:left;}
.logo{ float:left;}
.submit{ }
.submit input{ background:#d12f2f;
border: 0 none;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 5px; width:80px;margin-top:30px; margin-left:30px; }
.imgs{ margin:180px 0 0 0px; float:left;}
.footer{ width:100%; border-top:3px solid #0099FF;}
.footerin{ width:780px; margin:0 auto; text-align:center;}
.footerin a{ text-decoration:none; color:#666666; font-size:14px;}
img{
float: right;
height: 150px;
margin: 10px -120px;
width: 120px;}
</style>
<script language='JavaScript' type='text/javascript'>
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank /change_images_by_dropdown/images/Chrysanthemum.jpg'>";
break;
case 2:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank/change_images_by_dropdown/images/Desert.jpg'>";
break;
case 3:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank/change_images_by_dropdown/images/Hydrangeas.jpg'>";
break;
}
}
</script>
</head>
<body>
<div class="header">
<div class="headerin">
<div class="logo"><a href="#"><img src="images/big_logo.png" /></a></div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="divOuter">
<div class="left_feilds">
<p><input type="radio" id="class" name="chk" value="toi" checked>The Times of India<br/></p>
<p><input type="radio" id="Club" name="chk" value="tet">The Economic Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="mirror">Mirror<br/></p>
<p><input type="radio" id="Club" name="chk" value="mht">Maharashtra Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="nbt">NavBharat Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="eis">Ei Samay<br/></p>
<p><input type="radio" id="Club" name="chk" value="ngs">NavGujarat Samay<br/></p>
<p><input type="radio" id="Club" name="chk" value="vke">VijayKarnataka ePaper<br/></p>
<form action="insert_image.php" method="post" enctype="multipart/form-data">
<p><input type="file" name="file" ></p>
<p><div class="submit"><input type="submit" value="Submit" name="Submit"></div></p>
</div>
<div class="left_right">
<div class="forms">
<select id="describe">
<option name="field" value="1" onclick='check_value(1)'>Ahmedabad</option>
<option name="field" value="2" onclick='check_value(2)'>Banglore</option>
<option name="field" value="3" onclick='check_value(3)'>Chennai</option>
<option name="field" value="4" onclick='check_value(4)'>Delhi</option>
<option name="field" value="5" onclick='check_value(5)'>Hyderabad</option>
<option name="field" value="6" onclick='check_value(6)'>Jaipur</option>
<option name="field" value="7" onclick='check_value(7)'>Kochi</option>
<option name="field" value="8" onclick='check_value(8)'>Kolkata</option>
<option name="field" value="9" onclick='check_value(9)'>Lucknow</option>
<option name="field" value="10" onclick='check_value(10)'>Mumbai</option>
<option name="field" value="11" onclick='check_value(11)'>NaviMumbai</option>
<option name="field" value="12" onclick='check_value(12)'>Pune</option>
<option name="field" value="13" onclick='check_value(13)'>Thane</option>
</select>
<div class="clr"></div>
<div class="imgs">
<img src="images/knowMore.png" alt="" />
</div>
</div>
<div class="clr"></div>
<div id='imagedest'></div>
</form>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footerin">
<p><a href="#">About Us</a> | <a href="#">Advertise with Us</a> | <a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a> </p>
<p>Copyright © 2014 • All rights reserved. </p>
</div>
</div>
</body>
</html>
首先将onchange事件添加到复选框。测试条件复选框是否选中如果选中复选框，则获取复选框的值并相应地更改城市名称
城市名称更改图像也是如此
如果您提供您尝试过的代码，有人可以更好地帮助您
这是一个示例代码，您可以从中获得基本概念
<input name="check" type="radio" onclick="changeCities(this,1)" value="1">having value 1
<input name="check" type="radio" onclick="changeCities(this, 2)" value="2">having value 2
<input name="check" type="radio" onclick="changeCities(this, 3)" value="3">having value 3
<br>
<br><br>
<select id="cities" onchange="getPhosts(this.value);">
<option value="1">india</option>
<option value="2">australia</option>
<option value="3">america</option>
</select>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script>
function changeCities(thisObj, publisher) {
var publisher = publisher || $(thisObj).val();
// here get all the cities based on publishers
// i am writing here some static data
var cities = [{'id':'1', 'name':'dubai'}, {'id':'2', 'name':'arab'}];
var options = '';
for (var i = 0; i < cities.length; i++) {
options += "<option value='"+cities[i].id+"'>" + cities[i].name + "</option>";
}
$('#cities').html(options);
}
function getPhosts(city){
//same process like changeCities() for images here
}
</script>
相关文章：
- 可以't让我的if语句处理js中的html表单输入
- 如何在submit to sightly时将表单输入值作为参数传递给WCMUsePojo
- 单击鼠标，用MySQL数据填充html表单输入字段
- 从HTML表单发布blob的表单输入类型是什么
- 在不使用PHP的情况下将表单输入值获取到Javascript中
- 在Chrome中重新加载页面后清除表单输入值
- CasperJS填充表单-输入名称有方括号
- 表单输入字段随着溢出的文本而增长
- Highcharts:根据表单输入动态显示数据
- 如何在为表单输入分别处理$(this）和$时编写DRY代码
- 如何从AngularJS表单输入中生成一个永久变量
- 将表单输入保存到txt，弹出结果，不更改页面
- 在表单输入字段中创建默认值
- 如何根据提交表单时下拉框中的值禁用html表单输入框
- 使用jQuery延迟表单输入，并在延迟后在同一页面上显示结果
- Jquery无法找到给定表单id的表单输入
- 如何使用javascript验证在表单输入中避免负值、浮点值和十进制值
- 对表单输入执行计算
- Javascript 重复表单输入
- 使用 JavaScript 计算并添加表单输入的值
