1

JSON を使用して、2 つのリストで構成される動的なドロップダウン リストを作成しています。さらに、動的ではない 3 番目のドロップダウン リストがあります。

ユーザーが [送信] ボタンをクリックすると、3 つのドロップダウン リストで選択した値に基づいて、動的に作成される URL がトリガーされます。

たとえば、ユーザーが "Norway"、"Oslo"、"All stars" を選択した場合、送信ボタンをクリックすると "norway_oslo_allstars.html" が開きます。

ドロップダウン リストの 2 つ (1 番目と 3 番目) には、OPTION タグに VALUE 属性があり、動的に作成された URL を生成するために使用できると思いますが、2 番目のドロップ ダウン リストは JSON ファイルから作成されるため、エントリVALUE 属性はありません。

ユーザーの選択に基づいて URL を動的に作成する方法はまだありますか?

たとえば、http://jazzkatt.net/dynamic/を参照してください。

これが私の動的ドロップダウンと JSON コードです。

<script>

$(document).ready(function(){

    $("#json-one").change(function() {

        var $dropdown = $(this);

        $.getJSON("jsondata/data.json", function(data) {

            var key = $dropdown.val();
            var vals = [];

            switch(key) {
                case 'norway':
                    vals = data.norway.split(",");
                    break;
                case 'usa':
                    vals = data.usa.split(",");
                    break;
                case 'denmark':
                    vals = data.denmark.split(",");
            }

            var $jsontwo = $("#json-two");
            $jsontwo.empty();
            $.each(vals, function(index, value) {
                $jsontwo.append("<option>" + value + "</option>");
            });

        });
    });
    $("#json-one").trigger('change');
});
</script>

そして、2 つの動的ドロップダウン リストと 3 つ目の (非動的) ドロップダウン リストを含む HTML を次に示します。

<form action="" method="get" id="form1">

<select id="json-one">
    <option selected value="norway">Norway</option>
    <option value="usa">USA</option>
    <option value="denmark">Denmark</option>
</select>

<br />

<select id="json-two">

</select>

<br />

<select id="stars">
<option value="allstars">All stars</option>
<option value="onestar">One star</option>
<option value="twostars">Two stars</option>
<option value="threestars">Three stars</option>
</select>

</form>
<p>

<button type="submit" form="form1" value="Submit">Submit</button>

これが私が現在使用している JSON フォーマットです... URL の作成に使用できる、何らかの VALUE 属性を各エントリに追加することは可能ですか?

{
    "norway": "Oslo,Bergen,Stavanger",
    "usa": "New York,Chicago,Dallas",
    "denmark": "Copenhagen,Aalborg,Odense"
}
4

1 に答える 1