Question

Noob在这里尝试用Jquery做一些简单的事情。基本上我有一个像这样的小选择选项下拉列表：

<select onchange="javascript:swapContent('con3');">
    <option>selection 1</option>
    <option>selection 2</option>
    <option>selection 3</option>
</select>

目前它通过ajax发布到$ php变量：

$contentVar = $_POST['contentVar'];

javascript函数在这里：

<script language="JavaScript" type="text/javascript">
function swapContent(cv) {
    $("#myDiv").html('<img src="loader.gif"/>').show();
    var url = "myphpscript.php";
    $.post(url, {contentVar: cv} ,function(data) {
        $("#myDiv").html(data).show();
    });    
}
</script>

我该如何发布select-option下拉列表的值？

我意识到这是基本的，但我必须从某个地方开始，找不到向我展示如何做我需要的教程。谢谢你的帮助。

Answer 1

我该如何发布select-option下拉列表的值？

如果你想发送值游览脚本，你应该首先给你的选项元素赋值（和你的<select>元素的id，以便能够使用它并检索所选的值）：

<select onchange="javascript:swapContent('con3');" id="myselect">
    <option value="value1">selection 1</option>
    <option value="value2">selection 2</option>
    <option value="value3">selection 3</option>
</select>

然后：

// get the currently selected value from the dropdown
var value = $('#myselect').val();
$.post(url, { contentVar: cv, selectedValue: value }, function(data) {
    $("#myDiv").html(data).show();
});

另一方面，如果您想发送所选选项的文本，可以使用：

// get the currently selected value from the dropdown
var text = $('#myselect option:selected').text();
$.post(url, { contentVar: cv, selectedText: text }, function(data) {
    $("#myDiv").html(data).show();
});

现在，在PHP脚本中，您可以获取值：

$_POST['selectedValue']

Answer 2

<强> HTML ：

从select中删除内联javascript更改事件。

<select>
  <option>selection 1</option>
  <option>selection 2</option>
  <option>selection 3</option>
</select>

<强>的jQuery ：

将更改事件绑定到您的选择。在此活动中，this.value具有选择的值。

$(document).on("change", "select", function(){
    $("#myDiv").html('<img src="loader.gif"/>').show();
    var url = "myphpscript.php";

    $.post(url, {contentVar: this.value} ,function(data) {
        $("#myDiv").html(data).show();
        });    
});

Answer 3

var val = $('select option:selected').text();

使用jQuery的选择器语法，首先选择＆＃34; select＆＃34;控制，然后是＆＃34;选项＆＃34;选择控件的子项。然后，您将查找所选状态。最后，返回文本。

当然，这个代码会选择每个＆＃34; select＆＃34;控制页面。最好给你的select控件一个id：

<select id="mySelect">
    <option>Some option</option>
    <option>Some other option</option>
</select>

然后代码变为

var val = $('#mySelect option:selected').text()

Answer 4

您可能需要考虑使用unobtrusive JavaScript方法，而不是在html标记中使用on-change事件，而是从jQuery API site

附加如下所示的事件处理程序

<!DOCTYPE html>
<html>
 <head> 
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <body>
  <select name="sweets">
    <option>Chocolate</option>
    <option>Candy</option>
    <option>Taffy</option>
    <option>Fudge</option>
    <option>Cookie</option>
 </select>
 <div></div>
 <script>
   $("select").change(function () {
    var str = "";
    $("select option:selected").each(function () {
       str += $(this).text() + " ";
    });
    $("div").text(str);
   })
  .change();
 </script>
 </body>
</html>

使用jquery传递选项选择变量

4 个答案: