1

I have a dropdown in my form (the code was provided) and when the second option (of2) in the drop down is selected, some form elements change. 一切正常。

我想要做的是将下拉菜单更改为两个单选按钮。

在选择第二个单选按钮时会发生相同的表单更改（默认情况下，第一个单选按钮主要在页面加载时选择）。

这是下拉列表的表单代码：

<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>
4

1 回答 1

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>标签内。

于 2010-10-06T00:35:57.390 回答