[英]Change style of select box when Other select box change in html
I am trying to change the CSS property of select box when other select box is change. 我正在尝试更改其他选择框时更改选择框的CSS属性。
When Id=project-type , is changes its value than bgt-hourly and bgt-fixed select box show show accordingly. 当Id = project-type时,其值比bgt-hourly改变,并且bgt-fixed选择框显示相应的显示。
if hourly selected than bgt-hourly should show and when it select Fixed than bgt-fixed select options should show. 如果每小时显示比bgt-hourly应该显示,并且当它选择固定时,应该显示bgt-fixed选择选项。
i tried many time with different codes from stack-overflow but it didn't help me well. 我尝试了很多次使用来自堆栈溢出的不同代码,但这并没有很好地帮助我。
if any one can solve this than I appreciate his/her help. 如果有人可以解决这个问题,我将不胜感激。
thanks 谢谢
I have following Code: 我有以下代码:
HTML: HTML:
<span class="service-tab">
<span class="sub-cat span6">
<label for="project-type">Project Type:</label>
<select class="project-type " id="project-type" >
<option value="hourly">Hourly</option>
<option value="fixed">Fixed</option>
</select>
</span>
<span class="sub-cat span6 " id="bgt-fixed">
<label for="budget">Budget:</label>
<select class="budget " id="budget" required >
<option value="250">$0 - $250</option>
<option value="750">$250 - $750</option>
<option value="5000">$750 - $5000</option>
<option value="5000">$1500 - $5000</option>
<option value="5000">$3000 - $5000</option>
<option value="10000">$5000 - $10000</option>
<option value="10001">$10000 and Above</option>
</select>
</span>
<span class="sub-cat span6" id="bgt-hourly">
<label for="budget-hourly">Budget:</label>
<select class="budget-hourly" id="budget-hourly" required>
<option value="10">$0 - $10</option>
<option value="20">$10 - $20</option>
<option value="50">$20 - $50</option>
<option value="100">$50 - $100</option>
<option value="200">$100 - $200</option>
</select>
</span>
</span>
JS: JS:
<script type="text/javascript">
$(document).ready(function(){
$("#project-type").change(function(){
if($('#project-type').val() == "fixed")
{
$('#bgt-fixed').show();
alert('value 1 (wich refers to Chef) got selected');
}
});
if($(this).val() == "hourly")
{
alert('value 1 (wich refers to Chef) got selected');
}
});
});
Error: you have placed if($(this).val() == "hourly")
outside change function. 错误:您已将
if($(this).val() == "hourly")
放在更改函数之外。
Try: 尝试:
$(document).ready(function () {
$("#project-type").change(function () {
if ($('#project-type').val() == "fixed") {
$('#bgt-fixed').show();
alert('value 1 (wich refers to Chef) got selected');
} else if ($(this).val() == "hourly") {
alert('value 1 (wich refers to Chef) got selected');
}
});
});
must not set class or id same for best code practises 不得将类或id设置为相同的最佳代码做法
$("#project-type").change(function(){}
this should be 这应该是
$(".project-type").change(function(){}
and 和
<select class="project-type" id="projects" >
eliminate extra spaces 消除多余的空间
$(".project-type").change(function(){...}
Try this: 尝试这个:
$(document).ready(function(){
$("#project-type").change(function(){
if($('#project-type').val() == "fixed")
{
$('#bgt-fixed').show();
$('#bgt-hourly').hide();
$('#project-time').hide();
$('#project-hours').hide();
}
else if($(this).val() == "hourly")
{
$('#bgt-hourly').show();
$('#bgt-fixed').hide();
$('#project-time').show();
$('#project-hours').show();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.