Question

我无法尝试将下拉列表的值部分添加到我的网址末尾，因为下拉列表的每个值都不同。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Task 8</title>
</head>

<body>
  <script type="text/javascript">
    change(val) {
      document.staff1.action="http://tl28serv/task7.php?staffID=" + val;
    }
  </script>

  <form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
    <select id="staff1">
      <option value="12">Perce Trainor</option>
      <option value="15">Chuck Norris</option>
      <option value="23">Jane Zumba</option>
    </select>
    <br/>
    <input type="submit" name="submit">
  </form>
</body>

</html>

＆＃13;

Answer 1

您错过了function关键字。您还需要在change()事件上调用函数onchange。这样做：

  <script type="text/javascript">
    function change(th) { //Added function keyword
      document.getElementById("StaffName").action="http://tl28serv/task7.php?staffID=" + th.value;
    }
  </script>

  <form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
    <select id="staff1" onchange="change(this)"> <!--Called change() here-->
      <option value="12">Perce Trainor</option>
      <option value="15">Chuck Norris</option>
      <option value="23">Jane Zumba</option>
    </select>
    <br/>
    <input type="submit" name="submit">
</form>

Demo。检查控制台。

Answer 2

如果您想在服务器端处理更改的uri而在客户端不执行任何操作，则不必执行任何操作。只需将数据发送到服务器。

如果您使用GET方法，则id会显示在uri字符串上。

<!DOCTYPE html>
<html>

<head>
   <title>Task 8</title>
</head>

<body>

 <form id="StaffName" action="http://tl28serv/task7.php" method="get">
   <select id="staffID">
      <option value="12">Perce Trainor</option>
      <option value="15">Chuck Norris</option>
      <option value="23">Jane Zumba</option>
    </select>
    <br/>
    <input type="submit" name="submit">
 </form>
</body>

Answer 3

首先，您尝试在选择框上设置操作，这是不正确的，您必须在表单上设置操作。我认为这应该有效。

<!DOCTYPE html>
<html>

<head>
  <title>Task 8</title>
</head>

<body>
  <script type="text/javascript">
  function change(val) {
  document.StaffName.action="http://tl28serv/task7.php?staffID=" + val;
}
  </script>

  <form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">        
<select id="staff1" onSelect="change(this.value)">
  <option value="12" >Perce Trainor</option>
  <option value="15">Chuck Norris</option>
  <option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
 </form>
</body>

</html>

Answer 4

您无需 JavaScript 即可实现此目标。

以下是HTML

的使用方法

将您的表单method更改为GET，而不是POST。
将表单action更改为http://tl28serv/task7.php
将name属性添加到select，其值为staffID

当然，也存在一个Javascript解决方案。

以下是您实现目标的方法：

<body>
  <form id="StaffName" action="http://tl28serv/task7.php" method="post">
    <select id="staff1">
      <option value="12">Perce Trainor</option>
      <option value="15">Chuck Norris</option>
      <option value="23">Jane Zumba</option>
    </select>
    <br/>
    <input type="submit" name="submit">
  </form>
  // move script 
  <script type="text/javascript">
    var staff = document.getElementById('staff1');
    // attach "change" EventListener to #staff1
    staff.addEventListener('change', function() {
      document.getElementById('StaffName').action="http://tl28serv/task7.php?staffID=" + this.value;
    });
  </script>
</body>

无法将下拉列表中的值添加到url的末尾

4 个答案: