javascript - 如何在更改下拉列表时更改 href url？

Question

这是我的代码

<tbody>
<tr>
  <td>$id</td>
  <td>
    <div class='form-group'>
    <div class='col-sm-10'>
      <select id='form-control' class='form-control' onchange='leaveChange()'>
        <option value='$prices'>price</option>
        <option value='$Sale'>Sale</option>
        <option value='$payment'>payment</option>
      </select>";
      ?>    
      <script>
      function leaveChange() {
        if (document.getElementById("form-control").value == ""){
          document.getElementById("enableordisable").innerHTML = "Enable";
          document.getElementById("status").innerHTML = "Disabled";
        }     
        if(document.getElementById("form-control").value == 1){
          document.getElementById("enableordisable").innerHTML = "Disable";
          document.getElementById("status").innerHTML = "Enabled";
        }        
      }
      </script>
  <?php echo "</div></td>
  <td><p id='status'>---</p></td>
  <td> <a id='enableordisable' type='addToTable' class='btn waves- effect waves-light btn-custom' href='function/enabledisable.php?stuff=$id&price=$price'>price</a></td>

我想要做的是，当从下拉列表中选择一个值时，我希望在按钮中显示此 href URL

href='function/enabledisable.php?stuff=$id&price=$price&item'

进行更新，以便该项目将指向从下拉列表中选择的选项。
我该怎么做？
任何帮助将不胜感激!

注意:我无法使用选项内的值

Answer 1

这就是我想你想要的......

它获取所选选项的text作为要添加到&item=之后的数据。
请注意，我对您的 HTML 进行了一些修改以使其正常工作。
请参阅代码中的注释。

// Pass the base href to JS
var baseHref = "function/enabledisable.php?stuff=$id&price=$price";

// On change event function
function leaveChange(el) {
  if (document.getElementById("form-control").value == ""){
    document.getElementById("enableordisable").innerHTML = "Enable";
    document.getElementById("status").innerHTML = "Disabled";
  }     
  if(document.getElementById("form-control").value == 1){
    document.getElementById("enableordisable").innerHTML = "Disable";
    document.getElementById("status").innerHTML = "Enabled";
  }

  // Set the additional GET data to the URL
  var index = el.selectedIndex;
  var newHref = baseHref+"&item="+el.getElementsByTagName("option")[index].text
  console.log(newHref);
}

<table>
  <tbody>
    <tr>
      <td>$id</td>
      <td>
        <div class='form-group'>
          <div class='col-sm-10'>
            <select id='form-control' class='form-control' onchange='leaveChange(this)'>
              <option value='$prices'>price</option>
              <option value='$Sale'>Sale</option>
              <option value='$payment'>payment</option>
            </select>
          </div>
        </div>
      </td>
      <td><p id='status'>---</p></td>
      <td> <a id='enableordisable' type='addToTable' class='btn waves- effect waves-light btn-custom' href='function/enabledisable.php?stuff=$id&price=$price'>price</a></td>
    </tr>
  </tbody>
</table>

我假设 $id 和 $price 是 PHP 变量。