Question

所以我在这里有这个SELECT标记

<select id="url">
  <option id="url1" >url 1</option>
  <option id="url2" >url 2</option>
</select>
<button onclick="go()">GO</button>

然后在此处编写脚本

<script>
function go() {
                $.ajax({
                    url: 'url1.php?check=' + value,
                    type: 'GET',
                    async: true,
                })

现在，我想更改代码行：url: 'url1.php?check=' + value,以说出所选选项id是什么，而不是硬编码的"ur1.php"。如何实现这些目标？

注意：如果您想知道为什么会这样，我会剪掉代码。

Answer 1

执行此操作的正确方法是为每个option赋予一个value属性。您可以获取select元素并获取其值（将是所选选项的值）

我添加了一些代码来帮助您：

function go() {
  const select = document.getElementById('select');
  const value = select.value; // <-- this here is the value you can use to make your request
  console.log(value);
}

<select id="select">
  <option value="url1">URL 1</option>
  <option value="url2">URL 2</option>
</select>

<button onclick="go()">Go</button>

Answer 2

这是您需要的工作演示。我更改了以下内容以使其正常工作：

1）赋予<option>标签value属性（根据documentation），而不是id。然后，与所选选项相关的那个将自动读取为<select>的值。

2）通过使用.val()来获取<select>的值来获取当前选择的URL值

3）（不是必需的，但好的做法）是在脚本本身中使用不引人注目的事件处理程序，而不是内联“ onclick”。

4）（非必需），您不需要async:true，因为它已经是默认值。

var value = "something";

$("#go").click(function() {
  var url = $("#url").val() + '.php?check=' + value;
  console.log(url);
  $.ajax({
    url: url,
    type: 'GET',
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="url">
  <option value="url1">url 1</option>
  <option value="url2">url 2</option>
</select>
<button type="button" id="go">GO</button>

Answer 3

HTML代码：

<SELECT id="url">
<option id="url1" >url 1</option>
<option id="url2" >url 2</option>
</SELECT>
<button id = "button_go">GO</button>

脚本：

$("#button_go").click(go);

function go() {
  var value =$('#url').children("option:selected").attr('id');
  alert("You have selected the ID- " + value);

  // your ajax code 
}

检查jsfiddle工作代码：https://jsfiddle.net/1eq29w6a/4/

如何使SELECT标记更改URL

3 个答案: