帮助将 DropDown 事件更改为单选按钮触发器 - javascript

Question

我的表单中有一个下拉菜单（已提供代码），当选择下拉列表中的第二个选项（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>  

Answer 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;
            }
        }  
    }
}

编辑：

对于脚本下拉菜单，不要将 放在 标记内。