Question

我在这里查看了无数示例，但不确定我在做什么错。我正在尝试根据下拉菜单中的选定值更改表单操作。为什么这样行不通？

基本上，HTML看起来像这样：

<form id="storetable" autocomplete="off" action="" method="post">
<label>STORE:</label>
  <input type="text" list="storeID" name="store" placeholder="Choose a store..." required>
       <datalist id="storeID">
          <option value="cwb_coins">Causeway Bay</option>
          <option value="wc_coins">Wan Chai</option>
          <option value="lck_coins">Lai Chi Kok</option>
          <option value="tp_coins">Tai Po</option>
       </datalist>
</form

javascript

<script>
    $(document).ready(function(){
    $("#storeID").change(function(){
   var url =  $(this).children(":selected").text(); //get the selected option value
   switch (url) 
  {
   case "cwb_coins":
   $("#storetable").attr('action','cwb_coin_code.php');
   //changing action attribute of form to cwb_coin_code.php
   break;
   case "wc_coins":
   $("#storetable").attr('action','wc_coin_code.php');
   break;
   case "lck_coins":
   $("#storetable").attr('action','lck_coin_code.php');
   break;
   case "tp_coins":
   $("#storetable").attr('action','tp_coin_code.php');
   break;
   default:
       $("#storetable").attr('action', '#');
   }
   }); 
 }); 
</script>

Answer 1

您为属性设置了错误的值-您需要选择的选项的实际值-而不是文本内容

$(document).ready(function(){
    $("#store").change(function(){
   var url =  $('#store').val(); //get the selected option value
   console.log('action: ' + url);
   switch (url) 
    {
     case "cwb_coins":
      $("#storetable").attr('action','cwb_coin_code.php');
       break;
     case "wc_coins":
       $("#storetable").attr('action','wc_coin_code.php');
        break;
     case "lck_coins":
        $("#storetable").attr('action','lck_coin_code.php');
         break;
     case "tp_coins":
        $("#storetable").attr('action','tp_coin_code.php');
        break;
     default:
       $("#storetable").attr('action', '#');
   }
   }); 
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="storetable" autocomplete="off" action="" method="post">
<label>STORE:</label>
  <input type="text" id="store" list="storeID" name="store" placeholder="Choose a store..." required>
       <datalist id="storeID">
          <option value="cwb_coins">Causeway Bay</option>
          <option value="wc_coins">Wan Chai</option>
          <option value="lck_coins">Lai Chi Kok</option>
          <option value="tp_coins">Tai Po</option>
       </datalist>
</form>

编辑-重构为甚至不需要选项上的值-请注意，当您不包含值时-该值是选项文本。这样，您可以将所选选项的文本用作switch语句中的变量值。

$(document).ready(function(){
    $("#store").change(function(){
   var url =  $(this).val(); //get the selected option value

   switch (url) 
    {
     case "Causeway Bay":
      $("#storetable").attr('action','cwb_coin_code.php');
       break;
     case "Wan Chai":
       $("#storetable").attr('action','wc_coin_code.php');
        break;
     case "Lai Chi Kok":
        $("#storetable").attr('action','lck_coin_code.php');
         break;
     case "Tai Po":
        $("#storetable").attr('action','tp_coin_code.php');
        break;
     default:
       $("#storetable").attr('action', '#');
   } 
   console.log('action: ' + $('#storetable').attr('action'));
   }); 
   
     
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="storetable" autocomplete="off" action="" method="post">
<label>STORE:</label>
  <input type="text" id="store" list="storeID" name="store" placeholder="Choose a store..." required>
       <datalist id="storeID">
          <option>Causeway Bay</option>
          <option>Wan Chai</option>
          <option>Lai Chi Kok</option>
          <option>Tai Po</option>
       </datalist>
</form>

如何根据数据列表选择更改表单操作属性值

1 个答案: