帮助将 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;
            }
        }  
    }
}

编辑：

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