帮助将 DropDown 事件更改为单选按钮触发器 - javascript
Posted
技术标签:
【中文标题】帮助将 DropDown 事件更改为单选按钮触发器 - javascript【英文标题】：Help with changing DropDown event to Radio Button triggers - javascript 【发布时间】：2011-04-21 14:07:34 【问题描述】：我在我的表单中下拉（提供了代码），选择下拉下降中的第二个选项（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" />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" />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>
【问题讨论】：
【参考方案1】：表单：将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> 标记内。
【讨论】：
@rob - 感谢 Rob 的回复！我似乎无法让它工作.. 我从两个收音机上删除了 ID，取出了第二个收音机上的 onChange 事件（我想成为触发器的那个）并将你的 javascript 插入到 JS 中，但它似乎没有做什么？ 因为您在 onChange 期间传递了整个表单，所以我也传递了整个表单。我不确定之前的 onChange 代码是否有效，但我在onChange 上提供了一些更改
我已经更新了上面的内容（见主帖底部），如果我没有正确输入你的更改，请告诉我？非常感谢！
你能把整个表格也贴出来吗？
添加了原始表单代码（注意，此代码不包含任何更改，并且具有我想用两个单选按钮替换的原始（第一个）下拉菜单）以上是关于帮助将 DropDown 事件更改为单选按钮触发器 - javascript的主要内容，如果未能解决你的问题，请参考以下文章
Javascript：如何让单选按钮的“onchange”事件通过外部函数触发？