我的表单中有一个下拉列表(已提供代码)，当选择下拉列表中的第二个选项 (of2) 时，某些表单元素会发生变化。一切正常。
我想要做的是将下拉菜单更改为两个单选按钮。
选择第二个单选按钮时会发生相同的表单更改(默认情况下，主要在页面加载时选择第一个单选按钮)。
这是下拉列表的表单代码:
<form id="propsearch_res" name="propsearch_res" method="post">
<select name="sales_rental" id="sales_rental" onChange="onChange(this.form)">
<option value="S" selected="selected">Properties For Sale</option>
<option value="L">Properties To Let</option>
</select>
...
这是当前支持更改(以及其余形式)的 JavaScript:
<script type="text/javascript">
function nongeosearch() {
document.form1.xstyle.value = "7";
}
function onChange(obj) {
var Current = obj.sales_rental.selectedIndex;
var n = 1;
obj.price_low.options.length = 0;
obj.price_high.options.length = 0;
if (obj.sales_rental.value == "S")
{
setsel(obj,"Any Price","","0");
setsel(obj,"£30,000","30000",n);n=n+1;
setsel(obj,"£40,000","40000",n);n=n+1;
setsel(obj,"£50,000+","",n);n=n+1;
} else {
setsel(obj,"Any p/month","","0");
setsel(obj,"£300","300",n);n=n+1;
setsel(obj,"£400","400",n);n=n+1;
setsel(obj,"£500+","",n);n=n+1;
}
}
$(document).ready(function() {
onChange(document.propsearch_res);
});
function setsel(obj,val1,val2,n) {
obj.price_low.options[n] = new Option(val1,val2);
obj.price_high.options[n] = new Option(val1,val2);
}
</script>
这是我用两个单选按钮尝试的
(它不起作用，但我认为那是因为 javascript 中需要调整一些东西:S)
<input type="radio" id="sales_rental" name="sales_rental" value="S" />
<input type="radio" id="sales_rental" name="sales_rental" value="L" onChange="onChange(this.form)" />
我也尝试过:
<input ...onClick="onChange(this.form)" />
...没有成功。
任何帮助将不胜感激!
感谢您的阅读
==== 仍然不高兴......我的单选按钮现在是这样的:
<input type="radio" name="sales_rental" checked value="S" />
<input type="radio" name="sales_rental" value="L" />
以及 JS 的更改(希望在正确的位置？):
<script type="text/javascript">
function nongeosearch() {
document.form1.xstyle.value = "7";
}
function onChange(obj) {
var n = 1;
obj.price_low.options.length = 0;
obj.price_high.options.length = 0;
if (obj.find("input[name=sales_rental]").val() == "S")
{
setsel(obj,"Any Price","","0");
setsel(obj,"£30,000","30000",n);n=n+1;
setsel(obj,"£40,000","40000",n);n=n+1;
setsel(obj,"£50,000+","",n);n=n+1;
} else {
setsel(obj,"Any p/month","","0");
setsel(obj,"£300","300",n);n=n+1;
setsel(obj,"£400","400",n);n=n+1;
setsel(obj,"£500+","",n);n=n+1;
}
}
$(document).ready(function() {
onChange(document.propsearch_res);
});
function setsel(obj,val1,val2,n) {
obj.price_low.options[n] = new Option(val1,val2);
obj.price_high.options[n] = new Option(val1,val2);
}
</script>
原始表单代码(用 2 个单选按钮替换第一个下拉列表)
<form id="propsearch_res" name="propsearch_res" method="post" action="script_search.php">
<fieldset><legend>Property Search Type</legend>
<span><span id="propsearch1">
<label for="sales_rental"><img src="images/ico_search.png" alt="Property Search: Step 1" />Search:</label>
<select name="sales_rental" id="sales_rental" onChange="onChange(this.form)">
<option value="S" selected="selected">Properties For Sale</option>
<option value="L">Properties To Let</option>
</select>
</span></span>
</fieldset>
<p>Filter search by particulars</p>
<fieldset><legend>Search Particulars</legend>
<div id="propsearch2">
<div>
<label for="PropTypwfld"><img class="house" src="images/ico_house.png" alt="Property Search: Step 2" />Search for a:</label>
<select name="type" id="PropTypefld" size="1">
<option value="">Property</option>
<script type="text/javascript" src="http://www.housescape.org.uk/cgi-bin/ptype.pl?ren1"></script>
</select>
</div>
<div>
<label for="area">loacted in:</label>
<select name="area" id="area" size="1">
<option value="">All Areas</option>
<script type="text/javascript" src="http://www.housescape.org.uk/cgi-bin/arealist.pl?ren1"></script>
</select>
</div>
<div>
<label for="Bedroomsfld">with a minimum:</label>
<select name="num_beds" id="Bedroomsfld" size="1">
<option value="1">1 Bedroom</option>
<option value="2">2 Bedrooms</option>
<option value="3">3 Bedrooms</option>
<option value="4">4 Bedrooms</option>
<option value="5">5 Bedrooms</option>
<option value="6">6 Bedrooms</option>
<option value="">No Preference</option>
</select>
</div>
<div>
<label for="price_low">between:</label>
<select name="price_low" id="price_low" size="1"></select>
</div>
<div>
<label for="price_high">and:</label>
<select name="price_high" id="price_high" class="lastinput" size="1"></select>
</div>
</div>
</fieldset>
<fieldset class="controls">
<input name="xstyle" id="xstyle" type="hidden" value="" />
<input name="submit" id="submit" type="submit" onClick="nongeosearch()" value="Search Properties" />
</fieldset>
</form>
最佳答案
表格:更改select元素到此。
<label for="sales_rental0">Properties For Sale</label><input type="radio" id="sales_rental0" name="sales_rental" value="S" checked />
<label for="sales_rental1">Properties To Let</label><input type="radio" id="sales_rental1" name="sales_rental" value="L" />
更改$(document).ready对此。
$(document).ready(function(){
onChange(document.propsearch_res);
$("input[name=sales_rental]").click(function(){
onChange(document.propsearch_res);
});
});
那么您还应该删除 id从 id 开始在您的单选按钮中是唯一的，并删除单选按钮上的 onChange 事件。
为了您的onChange功能改成这样。
function onChange(obj) {
var n = 1;
obj.price_low.options.length = 0;
obj.price_high.options.length = 0;
if (getRadioButtonValue(obj.sales_rental) == "S")
{
setsel(obj,"Any Price","","0");
setsel(obj,"£30,000","30000",n);n=n+1;
setsel(obj,"£40,000","40000",n);n=n+1;
setsel(obj,"£50,000+","",n);n=n+1;
} else {
setsel(obj,"Any p/month","","0");
setsel(obj,"£300","300",n);n=n+1;
setsel(obj,"£400","400",n);n=n+1;
setsel(obj,"£500+","",n);n=n+1;
}
}
最后在您的脚本中添加此函数。
function getRadioButtonValue(radio) {
if(radio.length > 0) {
for(var i=0; i<radio.length; i++) {
if(radio[i].checked) {
return radio[i].value;
}
}
}
}
编辑:
对于脚本下拉菜单，不要输入 <scripts>里面<select>标签。
关于javascript - 帮助将 DropDown 事件更改为单选按钮触发器 - javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3868715/