2

データベースから入力している 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 にあまり詳しくありません。PHP スクリプトを使用して getData 関数に渡された "str" 変数にアクセスしようとしましたが、それでも機能し"$string = $_GET['q']"ませんでした。助けてくれてありがとう。

更新: 問題の原因を突き止めることができました。データベースから選択リストを作成する 2 つの関数があります。ユーザーが最初のドロップダウン (id="categoriesSelect") からオプションを選択すると、2 番目のドロップダウン (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>

手動で選択リストに入れると、コードは正常に機能します。しかし、これら 2 つの関数を使用してデータベースからプルすると、何も表示されません。このように loadCategories() 関数を呼び出します
<body onload = "loadCategories()">。もう 1 つの選択ボックスは、これと非常によく似ています。具体的な問題はわかりませんが、loadCategories() または updateSubCats() から発生していることはわかっています。

4

2 に答える 2

2

コードが選択の値を取得しているようです。しかし、それはあなたの機能では失敗します。

その open 関数Hereを使ってみました。しかし、私の側では、スラッシュ (/) を使用しても機能しませんでした。だから、それを取り除いて試してみてください。

...

 xhr.open("GET", "display-product.php?q="+str, true);

...

編集:完全な作業コード...

<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'];

質問の編集部分でこれを試してください。

そして、これはそれを一緒に機能させるためのものです。

お役に立てれば。

于 2013-05-02T21:24:50.367 に答える
1

JQuery でこの可能なソリューションを使用できます。

  1. PHP コードのオプション タグに属性「id」を追加し、onChange 関数を削除します。

    echo "<select id='mySelect' title='Select one' name='selectcat'>";

  2. Jquery File JQuery 1.9.1を追加し、javascript HTML タグを追加します。

  3. 終了タグ本体の前に置く:

    $(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;
});

    });

  4. PHPで読む：

    echo $_POST['selectedValue'];

    また

    echo $_POST['selectedLabel'];

于 2013-05-02T21:26:00.943 に答える