使用AJAX检索HTML下拉列表值
Retrieve HTML drop down list value with AJAX
我有一个HTML下拉列表,我从数据库填充。我的问题是如何使用AJAX从这个下拉列表中检索选定项的值?我的javascript:
<script type = "text/javascript">
function getData(str){
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "/display-product.php?q="+str, true);
xhr.send(null);
}
}
</script>
display-product.php中的下拉列表:
<div>
<?php
echo '<select title="Select one" name="selectcat" onChange="getData(this.options[this.selectedIndex].value)">';
while($row1 = $result->fetch_assoc()){
echo '<option value="' . $row1['id'] . '">' . $row1['category'] . '</option>';
}
echo '</select>';
?>
</div>
显示所选项目的div:
<div class="product_directory" id="div1"></div>
我不太熟悉AJAX。我试图访问"str"变量传递给getData函数在我的PHP脚本使用"$string = $_GET['q']"
,但仍然没有工作。提前感谢您的帮助。
UPDATE:我能够找出问题的根源:我有两个函数从数据库中填充选择列表。当用户从第一个下拉列表(id =" categoresselect ")中选择一个选项时,第二个下拉列表(id =" subcatsSelect")将自动填充。下面是两个函数的代码:
<script type="text/javascript">
<?php
echo "var categories = $jsonCats; 'n";
echo "var subcats = $jsonSubCats; 'n";
?>
function loadCategories(){
var select = document.getElementById("categoriesSelect");
select.onchange = updateSubCats;
for(var i = 0; i < categories.length; i++){
select.options[i] = new Option(categories[i].val,categories[i].id);
}
}
function updateSubCats(){
var catSelect = this;
var catid = this.value;
var subcatSelect = document.getElementById("subcatsSelect");
subcatSelect.options.length = 0; //delete all options if any present
for(var i = 0; i < subcats[catid].length; i++){
subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
}
}
</script>
如果我手动放入选择列表,代码可以正常工作。但是使用这两个函数从数据库中提取数据时,没有显示任何内容。我像这样调用loadCategories()函数<body onload = "loadCategories()">
。另一个选择框与这个非常相似。我不知道具体的问题,但我知道它要么来自loadCategories()或updateSubCats()。
似乎您的代码正在检索选择上的值。但是你的功能失效了。
我试过使用这个打开函数。但是,在我这边,使用斜杠(/)不起作用。所以,试着删除它,并尝试它。
…
xhr.open("GET", "display-product.php?q="+str, true);
…
EDIT:完整工作代码…
<script type = "text/javascript">
function getData(str){
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "display-product.php?q="+str, true);
xhr.send(null);
}
}
</script>
<select title="Select one" name="selectcat" onChange="getData(this.options[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="div1"></div>
…在display-product.php
echo $_GET['q'];
对于你的问题的编辑部分,试试这个。
和这个另一个使它一起工作。
您可以使用JQuery的这个可能的解决方案:
-
在php代码的选项标签中添加属性"id",并删除onChange函数:
echo "<select id='mySelect' title='Select one' name='selectcat'>";
-
添加Jquery文件Jquery 1.9.1并添加javascript HTML标签
-
将结束标签置于body前:
$(document).ready( function() {
$('#mySelect').change(function(){var $selectedOption = $(this).find('option:selected'); var selectedLabel = $selectedOption.text(); var selectedValue = $selectedOption.val(); alert(selectedValue + ' - ' + selectedLabel); $('.product_directory').html(selectedValue + ' - ' + selectedLabel); $.ajax({ type:"POST", url:"display-product.php", data:selectedValue OR selectedLabel, success:function(response){ alert('Succes send'); } }) return false; });
});
-
在php中读取:
echo $ _POST [' selectedValue '],
或
echo $ _POST [' selectedLabel '],
- javascript和html图像下拉列表
- 如何在 HTML 下拉列表中制作锚标记
- 数据和HTML下拉列表
- 在html中显示任一下拉列表
- 在Moqui中,如何在html.ftl中加载数据库表数据作为下拉列表
- 需要在 html 中使用两个下拉列表来显示不同的 json 值
- HTML 表单字段根据从下拉列表中选择的选项显示/隐藏
- HTML 下拉列表所选值
- 只有在HTML表单中选择了某个下拉列表时,才需要字段
- html形式的下拉列表
- 有角度的自动建议文本排版和html ul li下拉列表
- 如何根据HTML下拉列表中的数量选择来计算价格
- 从php中的mysql中复制带有嵌入式下拉列表的html表单javascript
- JS下拉列表没有'不能在复制的HTML源中工作
- 从 html.append 追加的 html 下拉列表中获取返回值
- 在选择其他下拉列表html和javascript araray的基础上,填充3个连续的下拉列表
- 使用 SQL 信息更新选择下拉列表 (HTML)
- 层次结构和多选项下拉列表(HTML),并在项目之间导航(子节点)
- 显示选项与复选框下拉列表- HTML/JAVASCRIPT
- Chrome中的AJAX下拉列表(HTML Select)