Ajax on select control Jquery javascript?

Ajax on select control Jquery javascript?

本文关键字：javascript Jquery control on select Ajax      更新时间：2023-09-26

当有人单击选择控件值时，我想做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>
最初加载页面时此页面元素的默认内容

还有阿贾克斯。.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，一切都很好，很顺利，我哪里犯了错误？

你应该使用事件处理程序 .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>

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

改变 

{contentVar: cv}

到类似的东西 

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

可能有效。

其次，你在 html 中还有一个 select 元素的拼写错误：

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（）？

相关文章：