1

apx で最も一般的に選択されるオプションを事前に選択しています。300 要素を選択し、これらの値がまだ最初の事前選択/デフォルト状態にある場合と、ユーザーがフォーム要素をクリックしてその値を積極的に選択した場合(ユーザーが離脱するという積極的な決定を行ったことを示す)を区別したいと考えています。その値に設定されます）。

それを行うために、事前に選択されている各値のオプションのペアを作成しています (わずかに異なる値、つまりvalue="50"vs. value="50_Default")。要素がクリックされたときに、事前に選択されたオプションを非表示にして通常のオプションを表示したい1。クラスをセレクターとして使用して、値に関係なくすべての Select 要素に対して関数が機能するようにしたいと考えています。

jQuery の show/hide メソッドをこのシナリオに適応させるのに問題があります。また、関数内の各オプションを指定する必要がある SO 投稿に関する同様の質問に対して見た回答を変更することもできません (つまり、jQuery は Radio に基づいて SELECT オプションを無効にします)。 selected (すべてのブラウザーのサポートが必要です)クラスごとに Select オプションを表示/非表示にする 1 つの解決策を見つけましたが、コードが複雑すぎて自分で適応させることができないため、それが最善の方法である場合は修正していただければ幸いです。https://stackoverflow.com/a/5924965/1056713

私はこれらの線に沿って何かをしようとしています(これらの機能はどちらも機能していません)

JS

$(".default_set").click(function(){
    $(this).children("select option .default_field").hide();
    $(this).children("select option .selected_field").show();
});

// Store the hidden options (necessary in IE)
$(".hidden_field").hide();
$(this).parent("select option .default_field").removeAttr("selected");
$(this).parent("select option .default_field").hide();
$(this).parent("select option .selected_field").show();

HTML

<select name=min_jeans class="default_set">
    <option value=0>$0</option>
    <option value="50_Default" class="default_field" selected=selected>$50</option>
    <option value="50" class="selected_field" style="display:none">$50</option>
    <option value=100>$100</option>
    <option value=150>$150</option>
    <option class="hidden_field" value="hidden_field" style="display:none;"></option>    
</select>

これは、クラスの代わりに値を使用して、(@kasdega の助けを借りて) http://jsfiddle.net/chayacooper/VN2Su/13/で得た最も近いものです。それもまったく正しく機能していません-要素がクリックされる前にフィドルはデフォルト値を表示しません.コンピューターでコードを実行すると、反対の問題があります-要素がクリックされる前にデフォルト値が表示されますが、隠す必要があるときに隠す必要はありません。

4

3 に答える 3

3

私は非表示/表示を使用しません。要素を操作するだけです

$('select').focus(function() {
    var option = $(this).find("option[value*=Default]");
    option.attr('value', option.attr('value').match(/[0-9]+/));
});

http://jsfiddle.net/JHAPp/2/

focusユーザーが選択を操作したことを検出するために使用します。その場合は、値からその部分を削除し_Defaultます（実際には数字と一致しているだけです）。

何も触れずにフォームを送信すると、が返されます50_Default。セレクトをタッチすると戻ります50

于 2013-03-08T20:16:24.957 に答える
1

以下は、選択のデフォルトオプションを表示し、アイテムがクリックされたときにそれを非表示にして、関連する値を選択します。

$(".default_set").focus(function () {
    $(".default_field").hide();
    if ($(".default_field").is(":selected")) {
        $(".selected_field").show().prop("selected", true);
    }
});

デモ

于 2013-03-08T20:19:00.030 に答える
0

私は次のように書きます：

$(".default_set").focus(function () {
if ($('.default_field:selected')) {
    $('.default_field').hide();
    $('.selected_field').show();
    $('.default_field').removeAttr('selected');
}
});

これがうまくいき、あなたを助けることを願っています

于 2013-03-08T20:34:00.027 に答える