1

私のjavascriptは良くありませんが、学ぼうとしています。何日もこの場所にいて、助けを求めるのは気が進まないが、ヒントが必要だ :)

2 つの SELECT ドロップダウンを含むドロップダウン メニューがあります。

    <select name="programSelect" onchange="setLanguage()" id="programList">
    </select>
  <br>
    <select name="languageSelect" id="languageList">
    </select>

Javascript (以下のコード) は、XML からドロップダウンを作成します。それはうまくいきます！

私は今、1 つの項目から始めて、いくつかの簡単なことを達成しようとしています。

フォームを送信すると、変数が POST 経由で同じページに渡されます。検索が行われ、ドロップダウンが再表示されます。

最初のドロップダウンの onClick によって 2 番目のドロップダウンが読み込まれるため、ページがリロードされるとドロップダウンは読み込まれません。私はそれほど素晴らしいPHPハックを行いましたが、それは私が望んでいたことを実際には達成しませんでした.

理想的には、ページがリロードされたときに、最初のドロップダウンにすべての選択肢 (選択された項目が選択されている) が表示され、2 番目のドロップダウンに選択された項目が選択された状態で表示されます。

以下のコード。私がやろうとしていることが単純かどうかはわかりませんが、事前に感謝します。

この JavaScript は私のフッターにあり、ドロップダウン階層が既に構築されている単純な XML ドキュメントを読み込みます。最初に Javascript、次に XML:

<script type="text/javascript" language="javascript">
$(document).ready(init);
//var mainXML;
var curProgram="";
var curLanguage="";
function init(){
    // $("#languageList").hide();   //Dont Hide the level 2, or level 3
    loadXML("/xml/dropdownSelections.xml");
}
function loadXML(_xml){
$.ajax({
         type: "GET",
         url: _xml,
         dataType: "xml",
         success: setXML
}) // close ajax
}
function setXML(_xml){
var _idx=0;
var curOption;
var curCountry = $(_xml).find('country');
$(curCountry).each(function(i){
    var country = $(this);
    curOption=$("<option value='" + $(country).attr('program') + "'>" + country.children('label').text() + "</option>")
    $(curOption).appendTo($('#programList'))
})
}
function setLanguage(){
var curCountry = $('#programList').children(':selected').data('country')
$('#languageList').html(""); // reset the languages list
var curLang = $(curCountry).find('language');
$('#linkURL').html("");
if (curLang.length>1){
    curLang.each(function(i){
        var lang = $(this);
        var langCode=lang.attr('langCode');
        if (i==0){
            curOption="<option value='null'>--Select Issue--</option><option value='" + langCode + "'>" + lang.text() + "</option>";
        }else{
            curOption+="<option value='" + langCode + "'>" + lang.text() + "</option>"
        }
    });
    $(curOption).appendTo($('#languageList'));
    $('#languageList').show()
}else if (curCountry==null){
    // $('#languageList').hide();
    curOption="<option value='null'>--Select Issue--</option>";
    $(curOption).appendTo($('#languageList'));
}else{
    $('#languageList').hide();
    gotoPage($(curCountry).find('language').attr('langCode'))
}
}

</script>

そして XML (その最初の部分だけで、この構造を模倣する他のセクションがあります):

<?xml version="1.0" encoding="UTF-8"?>
<countries>
<country program="read-and-learn">
    <label>Read and Learn</label>

    <languages>
        <language langCode="italian">Italian</language>
        <language langCode="french">French</language>
        <language langCode="spanish">Spanish</language>
        <language langCode="german">German</language>
        <language langCode="japanese">Japanese</language>
        <language langCode="russian">Russian</language>
        <language langCode="dutch">Dutch</language>
    </languages>

</country>
4

1 に答える 1

1

これで、ページの送信間で選択ボックスの選択を維持したいと考えています。これには、PHP を使用できます。

フォーム フィールドを含むフォームを PHP ページに送信すると、PHP コードで実際に選択されたものにアクセスできます。

したがって、私たちの場合、PHP で選択されたフォーム フィールドの値にアクセスするには、次のコードを使用する必要があります。

$programSelect = $_POST['programSelect'];
$languageSelect = $_POST['languageSelect'];

したがって、これらの値を PHP で使用できます。

ページが読み込まれ、選択ボックスに入力された後にこれらの値が必要な場合。

JavaScript は同じページにあるため、JavaScript では次の 2 行を追加します。

var programSelect = <?php echo $programSelect; ?>,
    languageSelect = <?php echo $languageSelect; ?>;

上記の 2 行では、選択した値を PHP から JavaScript に渡しています。

XML からデータを入力したら、選択フォーム フィールドでオプションを選択する必要があります。単純な jQuery を使用して JavaScript で選択したオプションの値を既に持っているので、それらを選択できます。例えば ​​：

$("#programList option[value='" + programSelect + "']").attr('selected', true);
$("#languageList option[value='" + languageSelect + "']").attr('selected', true);

これはアイデアを与えるためのものです。

于 2013-03-08T08:59:25.540 に答える