0

私は、JavaScript と連携してダウンロードになる複合ファイル名を作成する PHP 出力フォームを使用しています。

この投稿も実装しました：

相互作用して 1 つの結果を生成する 3 つの選択ボックス - HTML、JavaScript、または jQuery

だから今、私は既存の複数選択フォームを持っています:

<select id="one">
    <option value="default">Select Product</option>
    <option class="s" value="1">product1</option>
    <option class="q" value="2">product2</option>
    <option class="q" value="3">product3</option>
</select>

<select id="two">
    <option value="default">Select Version</option>
    <option class="l" value="4">product4</option>
    <option class="l" value="5">product5</option>
    <option class="c" value="6">product6</option>
</select>

<select id="three">
    <option value="default">Select OS</option>
    <option class="o" value="7">product7</option>
    <option class="o" value="8">product8</option>
    <option class="o" value="9">product9</option>
</select>

<select id="three">
    <option value="default">Select Architecture</option>
    <option class="a" value="10">product10</option>
    <option class="a" value="11">product11</option>
    <option class="a" value="12">product12</option>
</select>

ボタンをクリックすると、文字列が連結され、ダウンロード インストーラーである URL が作成されます。これは正常に機能し、ほとんどの場合、ダウンロードする有効なファイルが生成されます。

ただし、無効なオプションがいくつかあります。上記のクラスは、対応するグループにあることが明らかなので、この投稿のためだけに追加しました。

ここでの問題は、この既存のフォームでカスケード効果を得るにはどうすればよいかということです。私が使用しているPHPとJavaScriptは次のとおりです。

PHP ファイルから:

$output .=  '<div><p class="download-button"><a id="viewer-dl"';
$output .=  ' onclick="download_file(document.getElementById(';
$output .=  "'" . $product_id . "'" . ').value, document.getElementById(';
$output .=  "'" . $version_id . "'" . ').value, document.getElementById(';
$output .=  "'" . $os_id      . "'" . ').value, document.getElementById(';
$output .=  "'" . $arch_id    . "'" . ')"></a></p></div>';

JavaScript ファイルから:

$(function() {
    $("#viewer-dl").click(function() {
        download_viewer( $('#product_id').val(), $('#version_id').val(), 
            $('#os_id').val(), $('#arch_id').val());
    });
});

function download_file(version_id, os_id, arch_id) {

    if (product_id == 'default' && version_id == 'default' && 
        os_id == 'default' && arch_id == 'default') {
        return;
    }

    else if (product_id != 'default') {
        window.location = 'mysite.com/download/Install_' +
            product_id + '_' + version_id + '_' + arch_id + '.exe';
    }
}

私がやろうとしているのは、クラスが選択されたときに、次の選択のためにとクラスを選択しsたいのですが、クラスが選択されたときに、クラスのみを選択したいということです。OS、アーキテクチャの選択は、すべての選択に対応したいため、これらのクラスは同じです。lcqc

4

2 に答える 2

1

JSFiddleにできることの小さなデモを作成しました：http：//jsfiddle.net/nx6yF/

基本的に私がしたことは、他のすべての選択を非表示にしましたが、最初に、最初に選択を変更した場合は、選択を確認して2番目の選択を表示する必要があります

$("#one").change(function() {
        var val = $(this).val();
        if (val != "default") {
            $("#two").show();
        }
});

また、2番目の選択で表示するオプションを決定する必要があります。たぶん、クラスはこれを処理するための最も実用的なものではありませんが、次のようなものである可能性があります。

 var is_q = $("#one > option[value="+val+"]").hasClass("q");
 $("#two > option").each(function() {
      if (!$(this).hasClass("c") && $(this).val() != "default") {
          if (is_q) {
              $(this).attr("disabled",true);
          }
          else{
              $(this).attr("disabled",false);
          }
      }
 });

ここではオプションを無効にするために使用しましたが、それらを非表示にすることも可能です。とにかく無効/非表示の選択も、複数の選択でフォームを正しく機能させるために、選択されている場合はデフォルトに変更する必要があります

この後、選択2が選択されているかどうかを確認してから、選択3を表示できます。もちろん、一部の選択にはデフォルト値があり、次の選択は非表示にする必要があります。

簡単な答え、カスケード効果を作成する方法があるかどうかはわかりません-それを行うにはコーディングが必要です。

于 2012-12-13T20:10:03.673 に答える
0

選択の代わりにリストを使用してデモを作成しました: http://jsfiddle.net/MQ3u3/5/

<ul id="parents"></ul>
<ul id="children"></ul>
<div id="bucket"></div>


var data = [{
    "id": 1,
        "name": "Item1",
        "children": [{
        "id": 1,
            "name": "child one"
    }, {
        "id": 2,
            "name": "child two"
    }]
}, {
    "id": 2,
        "name": "Item2",
        "children": [{
        "id": 1,
            "name": "child three"
    }, {
        "id": 2,
            "name": "child four"
    }]
}, {
    "id": 3,
        "name": "Item3",
        "children": [{
        "id": 1,
            "name": "child five"
    }, {
        "id": 2,
            "name": "child six"
    }]
}];
$(function () {
    for (var i = 0; i < data.length; i++) {
        createParentItem(i);
    }
    $('li.parent').on('click', function () {
        $('#children li').remove();
        var parentId = $(this).attr('data-id');

        for (var i1 = 0; i1 < data.length; i1++) {
            if (parentId == data[i1].id) {
                for (var i2 = 0; i2 < data[i1].children.length; i2++) {
                    createChildItem(i1, i2);
                }
            }
        }
        $('li.child').off();
        $('li.child').on('click', function () {
            var parentId = $(this).attr('parent-data-id');
            var childId = $(this).attr('child-data-id');
            for (var i1 = 0; i1 < data.length; i1++) {
                if (parentId == data[i1].id) {
                    for (var i2 = 0; i2 < data[i1].children.length; i2++) {

                        if (childId == data[i1].children[i2].id) {
                            addToBucket(i1, i2);
                        }
                    }
                }
            }
        });
    });
});
function createParentItem(index) {
    var li = $('<li>', {
        class: 'parent',
            "data-id": data[index].id,
        text: data[index].name
    });
    $('ul#parents').append(li);
}
function createChildItem(pIndex, cIndex) {
    var li = $('<li>', {
        class: 'child',
            "parent-data-id": data[pIndex].id,
            "child-data-id": data[pIndex].children[cIndex].id,
        text: data[pIndex].children[cIndex].name
    });
    $('ul#children').append(li);
}
function addToBucket(pIndex, cIndex) {
    var child = data[pIndex].children[cIndex];
    var childElm = $('<span>', {
        text: child.name + ' '
    });
    $('#bucket').append(childElm);
}
于 2014-07-18T15:12:04.320 に答える