表单事件onChange不适用于下拉选择

Question

我有一种表单可以完美运行，并根据单选按钮更改表单的动作：

 <form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
 <input type="radio" name="energy" value="electricity" checked>
 <label for="electricity">Electricity</label>
 <input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
 <label for="gas">Natural Gas</label>
 <input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
 </form>

我想做同样的事情，但是通过使用onChange而不是单选按钮，而是使用下面显示的下拉列表来更改另一种表单上的操作。 我究竟做错了什么？

<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>

我首先尝试了onChange =“ if（this.checked）并认为由于它是一个选择，因此应该为onChange =” if（this.selected），但都不起作用。 这不是功能吗？

Answer 1

您需要对其稍作更改。

您的onchange事件应绑定到select而不是单个选项。

我还向每个选项添加了一个属性“ data-url”，以存储将需要添加到表单操作onchange的url。

然后，javascript函数可以使用此“ data-url”属性来更新表单操作。 这也意味着您不必在所有onchange属性中重复相同的代码。 您可以仅调用提取相应“ data-url”的函数。

参见-http://jsfiddle.net/williamtdavies/8kxzaquw/

<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
    <p>Choose Your Service</p>
    <select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
        <option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
        <option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
        <option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
    </select>
    <p>Enter Your ZIP Code</p>
    <input name="service_zip_5" type="text" id="zipcode"/>
    <button type="submit" id="submit">Get Started</button>
</form>

<script>
    function changeFormAction(elem){
    document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url"); 
    }
</script>