0

当有人单击选择控件值时，我想做 ajax。问题是 onChange 不会触发 ajax 调用 jquery :(

这就是我到目前为止所拥有的:)

JAVASCRIPT： 

<script>
 function swapContent(cv) {
    $("#myDiv").html('').show();
    var url = "ajax.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#myDiv").html(data).show();
    });
}
</script>

HTML

<select name="dimenzije" onchange"javascript:swapContent(this);">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
页面初始加载时我的此页面元素的默认内容

和 AJAX.PHP

<?php 
$contentVar = $_POST['contentVar'];
echo $contentVar;
?>

什么都没有触发:(但是当我做这样的事情时

     <a href="#" onClick="return false" onMouseDown="javascript:swapContent('Prva');">Content1</a>
<a href="#" onClick="return false" onMouseDown="javascript:swapContent('Druga');">Content2</a>
<a href="#" onClick="return false" onMouseDown="javascript:swapContent('Treca');">Content3</a>

有了 HREF，一切都很好而且很顺利，我在哪里犯了错误？

4

2 回答 2

1

您应该使用事件处理程序.change()。

JAVASCRIPT：

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($){
    // event handler
    $('select[name="dimenzije"]').on('change', function(event) {
        // get the value of the selection
        var cv = $(this).val(),
            url = "ajax.php";
        // change the hidden div's content to something if you're setting html().
        $("#myDiv").html('Loading...').show();
        // post
        $.post(url, {contentVar: cv} ,function(data) {
           // Replace with new content
           $("#myDiv").html(data).show();
        });
    });
});
</script>

HTML

<select name="dimenzije" id="swapContent">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
于 2013-11-14T18:14:59.147 回答
0

您的代码存在两个问题。首先，您将“this”作为参数传递给 contentSwap。而不是实际值。

改变

{contentVar: cv}

类似于

{contentVar: $(cv).val()}

可能会奏效。

其次，您在选择元素的 html 中也有一个错字：

onchange"javascript:swapContent(this);"

应该

onchange="javascript:swapContent(this);"

然而，就像 Alaa Badran 提到的这种类型的内联 javascript 是不可以的。

尝试这样的事情：

<select name="dimenzije">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<script>
    $('select[name="dimenzije"]').change(function(e){
        var $this = $(this),
            url = "ajax.php";

        $("#myDiv").html('').hide();

        $.post(url, {contentVar: $this.val()}, function(data) {
           $("#myDiv").html(data).show();
        });
    });
</script>

此外，由于您在 ajax 调用之前和之后使用 .show()，因此您可以将其省略。您的意思是先调用 .hide() 再调用 .show() 吗？

于 2013-11-14T18:14:28.307 回答