1

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>

我怎样才能发布选择选项下拉列表的值？

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

4

4 回答 4

3

我怎样才能发布选择选项下拉列表的值？

如果您想向游览脚本发送值，您应该首先为您的选项元素提供值（并为您的<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']
于 2013-01-10T15:52:30.157 回答
2

HTML：

从选择中删除内联 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();
        });    
});
于 2013-01-10T15:52:52.817 回答
2 
var val = $('select option:selected').text();

使用 jQuery 的选择器语法，您首先选择“选择”控件，然后选择选择控件的“选项”子项。然后查找选定的状态。最后，返回文本。

当然，照原样，此代码将选择页面上的每个“选择”控件。最好给您的选择控件一个 id：

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

然后代码变成

var val = $('#mySelect option:selected').text()
于 2013-01-10T15:53:04.257 回答
1

您可能需要考虑一种不显眼的 JavaScript方法，并且在您的 html 标记中没有 on-change 事件，而是附加一个事件处理程序，如下所示，来自jQuery API 站点

<!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>
于 2013-01-10T15:58:36.110 回答