[英]How can i change Form value Action based on dropdown value selected
我有兩種形式,第一種形式包含兩個下拉元素。 我希望根據表單1中選擇的下拉值來更改第二個表單操作值
表格1
<form method="post" style="padding: 10px 0px 10px 5px;">
<label>Front/Rear Tire:<br/><select name="tire" class="first">
<option value="">Select</option>
<option value="rear">Rear Tire</option>
<option value="front">Front Tire</option>
</select> </label>
<label>Tractor Type:<br/><select name="tractor" class="second" disabled>
<option value="">Select Type</option>
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select> </label>
</form>
表格2看起來像
<form method="post" action="A.php" >
</form>
我想要。
如果選擇后輪胎和(2WD或4WD),我想將action
值更改為“ A.php”
如果選擇了后輪胎和(MFWD),我想將action
值更改為“ B.php”
如果選擇前輪胎和(2WD或$ wd),我想將action
值更改為“ C.php”
如果選擇前輪胎和(MFWD),我想將action
值更改為“ D.php”
我已經使用數據屬性來存儲文件名。 您需要確保first
選擇中的屬性名稱與second
選擇中的值保持相同。
<option value="rear" data-2wd="A.php" data-4wd="A.php" data-mfwd="B.php" >Rear Tire</option>
<option value="front" data-2wd="C.php" data-4wd="C.php" data-mfwd="D.php" >Front Tire</option>
在委托on
使用change
事件以在選擇菜單中獲取更改。
$("#one select").on("change",function(){
var sel1 = $("select.second").find(":selected").val();
var sel2 = $("#one select.first").find(":selected").attr("data-"+sel1);
$("#two").attr("action",sel2);
})
請參考這個小提琴 。
可以用小的jQuery代碼來做
<form method="post" style="padding: 10px 0px 10px 5px;">
<label>Front/Rear Tire:<br/><select name="tire" class="first">
<option value="">Select</option>
<option value="rear">Rear Tire</option>
<option value="front">Front Tire</option>
</select id="drop"> </label>
<label>Tractor Type:<br/><select name="tractor" class="second" disabled>
<option value="">Select Type</option>
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select> </label>
</form>
<form method="post" action="A.php" id="form2">
</form>
<script>
var drop=$('#drop');
var form=$('#form2)
drop.change(function(){
var a= drop.val();
// here i show you how to add drop down value to form action
form.attr('action',a);
})
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.