添加选择onchange与AJAX

我是一个新手到Javascript，所以我无法找到我的问题的答案。我想在上一次选择更改时添加额外的选择。我知道我的代码看起来应该是很喜欢这一点，但它不工作：添加选择onchange与AJAX

$(function(){ 
$('#artist').change(function(){ 
    $.ajax({ 
     url: "artist_field.php", 
     dataType:"html", 
     type: "post", 
     success: function(data){ 
      $('#artist').append(data); 
     } 
    }); 
}); 
});

HTML

<td id="artist"> 
<select name="artist_1" id="artist"> 
<option value=""></option> 
</select> 
</td>

我的问题是，我不知道如何让artist_field.php值是我试图发送（因为我试图排除新选择中的上一个选定的选项）。我希望有一个人可以帮助我！提前致谢。

来源

2014-04-03 Steven Raaijmakers

你需要证明你的PHP文件，也向我们展示你的结果。 – Buzinas

也许你可以将第二个选择隐藏起来，并在匹配第一个值时显示它 – gbestard

顺便说一下，对于td标签和select有相同的id，你应该改变其中的一个 – gbestard

$(document).ready(function() { 
$('#select_2').hide(); 
$('#artist').change(function(){ 
    $('#select_2').show(); 
}); 
});

HTML

<td id="artist"> 
<select name="artist_1" id="artist"> 
<option value=""></option> 
</select> 
</td> 
<td> 
<select name="select_2" id="select_2"> 
<option value=""></option> 
</select> 
</td>

只显示第二个选择，如果你在第一个选择的东西

来源

2014-04-03 14:45:03 gbestard

更新：我刚刚注意到，您在代码中拥有ID艺术家两次。你可能会改变TD到<td id="artist_td">或东西我的示例工作

要发送当前选定的选项回服务器在后，你可以这样做：

$('#artist').change(function(){ 
    $.ajax({ 
     url: "artist_field.php", 
     data: { "value": $("#artist").val() }, 
     dataType:"html", 
     type: "post", 
     success: function(data){ 
      $('#artist').append(data); 
     } 
    }); 
});

然后在PHP文件，您可以通过$_POST["value"];获取该值，并使用该值来限制退货选项。

更新

如果你要多次触发事件改变了，这是怎么回事，每次追加新的数据。如果这不是你想要的行为，加div什么把新数据，如：

<td id="artist_td"> 
<select name="artist_1" id="artist"> 
<option value=""></option> 
</select> 
<div id="newdata"></div> 
</td>

然后编辑成功函数

success: function(data){ 
    $('#newdata').empty().append(data); 
}

来源

2014-04-03 14:41:40 jwatts1980

通过“artist_field.php”返回一个字符串，其中包含要放置在<中的所有元素，请选择>元素，并用逗号分隔。我希望这将有助于☻☺

window.addEventListener("load", function(){ 
    var list = document.getElementById("artist"); 
    var xhr = Xhr(); 
    xhr.onreadystatechange = function(e){ 
     if(xhr.status === 4 || xhr.status === 200) 
     { 
      var results = (xhr.responseText).split(','); 
      for(var i = 0; i < results.length; ++i) 
      { 
       var el = document.createElement("option"); 
       el.innerHTML = results[i]; 
       list.appendChild(el); 
      } 
     } 
    }; 
    xhr.open("GET", "artist_field.php", false); 
    xhr.send(null); 
}, false); 

function Xhr() 
{ 
    try { 
     return new XMLHttpRequest(); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Msxml3.XMLHTTP"); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Msxml2.XMLHTTP.6.0"); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Msxml2.XMLHTTP.3.0"); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Msxml2.XMLHTTP"); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
    }catch(e){} 
    return null; 
}

来源

2014-04-03 15:14:02

下面是代码，你可以很容易地理解select标签on change使用PHPajax请求。

HTML代码

<div class="form-group"> 
    <label>Select SMS Template</label> 
    <select id="sms-select" name="sms-select" onchange="smschange(this.value)" class="form-control"> 
     <option value="">Select SMS Template</option> 
      <?php foreach ($sms as $row) { ?> 
       <option value="1">Sample SMS</option> 
       <option value="2">Test SMS</option> 
      <?php } ?> 
    </select> 
</div>

JavaScript代码

<script> 
    function smschange(id) 
    { 
     $.ajax({ 
      type: 'post', 
      data: {'id': id}, 
      url: 'sms.php', 
      dataType: 'json', 
      success: function(res){ 
       alert(res); 
      }, 
      error: function(res){ 
       $('#message').text('Error!'); 
       $('.dvLoading').hide(); 
      } 
     }); 
    } 
</script>

jQuery库的源代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

来源

2016-05-17 11:57:03

添加选择onchange与AJAX

回答

相关问题