0

ドロップダウン リスト オプションが選択されたら、その選択したオプションを JavaScript 変数として保持したいと思います。

これをもう少し複雑にするには、変数をページのメイン Ajax コーディング内に保持する必要があります。これにより、別の Ajax コンテンツが読み込まれたときに変数が失われることはありません。

これが私の素晴らしく基本的なフォームコードです:

<form name="searchLocations" method="POST">
        <select name="locationName">
            <?php 
            $sql = mysql_query("SELECT locationName FROM tbl_locations ORDER BY locationName ASC");
            while ($row = mysql_fetch_array($sql)){
            echo "<option value=\"owner1\">" . $row['locationName'] . "</option>";
            }
            ?>
        </select>
        <button onclick="loadXMLDoc(indexSearchingSubmit);" id="searchingSubmit">Search</button>
    </form>

これが私のメインの ajax コードです。ここでは、後で使用できるようにフォーム ドロップダウン変数を保持する必要があります。

<script>
window.onload = function () {
    var everyone = document.getElementById('everyone'),
        searching = document.getElementById('searching'),
        searchingSubmit = document.getElementById('searchingSubmit');

    everyone.onclick = function() {
        loadXMLDoc('indexEveryone');
        everyone.className = 'filterOptionActive';
        searching.className = 'filterOption';
    }

    searching.onclick = function() {
        loadXMLDoc('indexSearching');        
        searching.className = 'filterOptionActive';
        everyone.className = 'filterOption';
    }

     searchingSubmit.onclick = function() {
        loadXMLDoc('indexSearchingSubmit');  
    }

    function loadXMLDoc(pageName)
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("leftCont").innerHTML=xmlhttp.responseText;
            }
          }

        function get_query(){
          var url = location.href;
          var qs = url.substring(url.indexOf('?') + 1).split('&');
          for(var i = 0, result = {}; i < qs.length; i++){
            qs[i] = qs[i].split('=');
            result[qs[i][0]] = decodeURIComponent(qs[i][1]);
          }
          return result;
        }

        xmlhttp.open("GET","../browse/" + pageName + ".php?user=" + get_query()['user'],true);
        xmlhttp.send();
        }
}
</script>
<!-- ends ajax script -->
4

1 に答える 1

0 
Using jQuery:
    $('[name="locationName"]').change(function() {
      YOUR_VAR = $(this).attr('value');
    });


Not using jQuery- 
Add onChange() to your SELECT element, also added id attribute.
Add javascript onchange handler function, which just retrieves the selected value and sets your var

    <select name="locationName" onChange="setSelected()" id="locationSelect">

    function setSelected(){
      var myselect= document.getElementById("locationSelect");
      YOUR_VAR = myselect.options[myselect.selectedIndex].value;
    }
于 2013-11-07T17:33:22.237 に答える