Question

<html>
    <head>
    </head>
    <body>
        <form action="area.php" method="get">
            <select name="xyz">
                <option value="1">option1</option>
                <option value="2">option2</option>
            </select>
    </body>
</html>

我想发送选项值的数据作为参数，以形成带有提交按钮的动作。我见过ajax和jquery，但每次都需要提交按钮。

Answer 1

为了简洁起见，我将使用jQuery语法。您也可以使用原生Javascript轻松完成此操作。

这是您表单的缩写版本：

<form action="area.php" method="get" id="myform">
    <select id="myselect">
        <!-- ... options ... -->
    </select>
</form>

在页面加载完成后运行此Javascript（请注意第一行）。在表单呈现后绑定.change()非常重要。

$(document).ready(function() {
    $("#myselect").change(function() {
        $("#myform").trigger("submit");
    });
});

每当select元素发生更改时，这将触发表单上的默认提交操作。

Answer 2

您可以按如下方式使用ajax：

$(".selectElement").on('change',function(){
    $.ajax({
     url: "area.php",
     method: "POST"
    });
});

您可以获得有关此http://api.jquery.com/jquery.ajax

的一些文档

Answer 3

<强> HTML：

<svg viewBox="0 0 1000 1000">
    <circle cx="500" cy="500" r="500" />
</svg>

<强> jQuery的：

<form>
  <select name="xyz" id="mySelect">
    <option value="1">option1</option>
    <option value="2">option2</option>
  </select>
</form>

Answer 4

<select name="xyz" onchange="this.form.submit()">
    <option value="1">option1</option>
    <option value="2">option2</option>
</select>

Answer 5

你可以试试这个：

  <html>
        <head>
    <script type="text/javascript">
    function call_ajax (str) {
        alert(str);
         var xmlhttp = new XMLHttpRequest();
         xmlhttp.onreadystatechange = function() {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                 document.getElementById("abc").innerHTML = xmlhttp.responseText;
             }
         }
         xmlhttp.open("POST", "a.php?value="+str, true);
         xmlhttp.send();
    }
</script>

    </head>
    <body>
        <form action="a.php" method="get">
            <select name="xyz" id="abc" onchange="return call_ajax(this.value)">
                <option value="1">option1</option>
                <option value="2">option2</option>
            </select>
    </body>
</html>

使用ajax将选择值作为参数发送到url，而不使用提交按钮

5 个答案: