Fatal编程技术网
  • javascript/
  • Javascript 根据所选值更改表单输入

Javascript 根据所选值更改表单输入

javascript jquery

Javascript 根据所选值更改表单输入,javascript,jquery,Javascript,Jquery,我有3个字段：publisher在单选按钮中，城市名称在下拉列表中，以及新闻报纸的图像 当我选择单选按钮时，城市下拉列表会相应地改变，当我们选择一个特定的城市时，新闻报纸的图像会根据所选的城市来显示，这是怎么可能的 我使用的代码是当我们选择另一个发布者代码不适用于图像时，第一次使用的代码： <html> <title>index</title> <script type="text/javascript" src="http://code.jquery

我有3个字段：
publisher
在单选按钮中，城市名称在下拉列表中，以及新闻报纸的图像

当我选择单选按钮时，城市下拉列表会相应地改变，当我们选择一个特定的城市时，新闻报纸的图像会根据所选的城市来显示，这是怎么可能的

我使用的代码是当我们选择另一个发布者代码不适用于图像时，第一次使用的代码：

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


指数
var listA=[{名称：'Ahmedabad'，值：'Ahmedabad'}，{名称：'Banglore'，值：'Banglore'}，{名称：'Chennai'，值：'Chennai'}，{名称：'Delhi'，值：'Delhi}，{名称：'Hyderabad'，值：'Hyderabad'}，{名称：'Jaipur'，值：'Jaipur'}，{名称：'Kochi名称：'Kolkata值：'Kolkata名称：'，{名称：'孟买'，值：'孟买'}，{名称：'Navi孟买'，值：'Navi孟买'}，{名称：'Pune'，值：'Pune'}，{名称：'Thane'，值：'Thane'}]；
var listB=[{name:'Banglore'，value:'Banglore'}，{name:'drish'，value:'drish'}，{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=[{名称：'Ahmednagar'，值：'Ahmednagar'}，{名称：'Aurangabad'，值：'Aurangabad'}，{名称：'Jalgaon'，值：'Jalgaon'}，{名称：'Kolhapur'，值：'Kolhapur'}，{名称：'Mumbai'，值：'Mumbai'}，{名称：'Nagpur'，值：'Nagpur'}，{名称：'Nashik'，值：'Nashik'}，{名称：'Pune'}；
var listE=[{名称：'德里'，值：'德里'}，{名称：'孟买'，值：'孟买'}，{名称：'勒克瑙'，值：'勒克瑙'}，{名称：'Ghaziabad'，值：'Ghaziabad'}，{名称：'Noida'，值：'Noida，{名称：'faridabad'，值：'faridabad'}，{名称：'Gurgaon'，值：'Gurgaon'}；
var listF=[{name:'drish'，value:'drish'}，{name:'Mumbai'，value:'Mumbai'}，{name:'luckknow'，value:'luckknow'}，{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:'drih'，value:'drih}，{name:'Mumbai'，value:'Mumbai}，{name:'luckknow'，value:'luckknow}，{name:'Ghaziabad'，value:'Ghaziabad'}，{name:'Noida'，value:'Noida，{name:'faridabad'，value:'faridabad'}，{name:'Gurgaon'，value:'Gurgaon'}；
$（文档）.ready（函数（）{
$（“input[name='chk']”）。在（'change'，function（）上{
if（$（this）.is（':checked'）&&&$（this.val（）=='toi'）
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});
}
else if（$（this）.is（':checked'）&&&$（this.val（）=='tet'））
{
$（'#descripe'）.empty（）
$.each（列表B，函数（索引，值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
else if（$（this）.is（':checked'）&&&$（this.val（）=='mirror'））
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
else if（$（this）.is（':checked'）&&&$（this.val（）=='mht'））
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
else if（$（this）.is（':checked'）&&&$（this.val（）=='nbt'））
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
else if（$（this）.is（':checked'）&&&$（this.val（）=='eis'））
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
else if（$（this）.is（':checked'）&&&$（this.val（）=='ngs'））
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
else if（$（this）.is（':checked'）&&&$（this.val（）=='vke'））
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
其他的
{
}
});
});  
正文{margin:0；padding:0；}
.标题{宽度：100%；边框底部：4px实心#0099ff；}
.headerin{宽度：710px；边距：0自动；}
divOuter先生{
背景：无重复滚动0 0#f9f9f9；
边框：2倍实心#fff；
边界半径：10px；
盒影：0 5px 5px#ddd；
保证金：28px自动；
填充：50px 20px；
宽度：710px；
}
.clr{clear:两者；}
.left_feilds{float:left；width:275px；}
.left_right{float:left；}
.forms{float:左；边距：128px 0；}
#描述{填充：3px10px；宽度：150px；浮点：左；}
.logo{float:left；}
.提交{}
.提交输入{背景：#D12F；
边界：0无；
边界半径：5px；
颜色：#fff；
光标：指针；
填充：5px；宽度：80px；页边距顶部：30px；页边距左侧：30px；}
.imgs{margin:180px 0 0px；float:left；}
.footer{宽度：100%；边框顶部：3px实心#0099FF；}
.footer位于{宽度：780px；边距：0自动；文本对齐：中心；}
.footer位于{文本装饰：无；颜色：#666666；字体大小：14px；}
img{
浮动：对；
高度：150像素；
利润率：10px-120px；
宽度：120px；}
功能检查值（字段值）
{    
开关（字段值）
{
案例1：
document.getElementById（“imagedest”）.innerHTML=“”；
打破
案例2：
document.getElementById（“imagedest”）.innerHTML=“”；
打破
案例3：
document.getElementById（“imagedest”）.innerHTML=“”；
打破
}
}
印度时报

经济时代

镜像

马哈拉施特拉时代

纳夫巴拉特时间

艾萨迈

纳夫古吉拉特萨迈

VijayKarnataka ePaper





艾哈迈达巴德
班加罗尔
钦奈
德里
海得拉巴
斋浦尔
高知
加尔各答
勒克瑙
孟买
孟买海军
浦那
塔恩
| | |

版权所有©2014•保留所有权利
首先将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>