0

数百の Select 要素を含むフォームがあり、ユーザーの時間を節約するために、最も一般的に選択される値を事前に選択しています。ユーザーが要素をクリックしていないときと値を積極的に選択したときを区別したいので、要素がクリックされたときにデフォルトオプションの値を切り替えたいと思います。

たとえば、この select 要素のデフォルトは でvalue="50_Default"あり、次のように変更されます。value="50" 

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

値によってオプションを表示/非表示にする関数を作成したいと思います(要素の多くは同じデフォルト値を持っているため)。主要なブラウザー間で機能する必要がありますが、オプションの選択は少し複雑なようで、私はjquery の show/hide メソッドをこのシナリオに適応させるのに問題があります。

機能しない機能を試してみました

$(function () {
    $(".default_field").click(function(){
      $('select option[value="50_Default"]').hide()  
      $('select option[value="50"]').show()  
    }
    });
});

これを実行できる(そして FF と IE で動作する)より複雑な関数を見つけましたが、1 つのオプションのデフォルト値と通常値を表示/非表示にできるようにコードを変更する方法がわかりません。特定の値を参照して、同じデフォルト値を持つすべての要素に対して 1 つの関数を使用できるようにします。このコードの実用的なフィドルはここにあります: http://jsfiddle.net/chayacooper/YVMzt/18/

<p id="choosetype">
     <select name="category" id="category">
     <option value="">All Food</option>
     <option value="Food1">Fruit</option>
     <option value="Food2">Veggies</option>
     </select>
     <select name="fileType" id="fileType" size="1">
     <option value="Fruit1" class="sub-Food1">Apples</option>
     <option value="Fruit2" class="sub-Food1">Pears</option>
     <option value="Veg1" class="sub-Food2">Peas</option>
     <option value="Veg2" class="sub-Food2">Carrots</option>
     </select>
<span id="optionstore" style="display:none;"></span>
</p>
$(document).ready(function() {
    $('#category').on("change", function() {
    var cattype = $(this).val();
    optionswitch(cattype);
});
});
function optionswitch(myfilter) {
if ($('#optionstore').text() == "") {
    $('option[class^="sub-"]').each(function() {
        var optvalue = $(this).val();
        var optclass = $(this).prop('class');
        var opttext = $(this).text();
        optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
        $('#optionstore').text(optionlist);
    });
}
$('option[class^="sub-"]').remove();
populateoption = rewriteoption(myfilter);
$('#fileType').html(populateoption);
}

function rewriteoption(myfilter) {
var options = $('#optionstore').text().split('@%');
var resultgood = false;
var myfilterclass = "sub-" + myfilter;
var optionlisting = "";

myfilterclass = (myfilter != "")?myfilterclass:"all";
for (var i = 3; i < options.length; i = i + 3) {
    if (options[i - 1] == myfilterclass || myfilterclass == "all") {
        optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="sub-' + options[i - 1] + '">' + options[i] + '</option>';
        resultgood = true;
    }
}
if (resultgood) {
    return optionlisting;
}
}
4

2 に答える 2

1

クラスを使用するという@kasdegaの提案を取り入れreplace、要素の値を操作するために使用したオプションのペアを非表示/表示しようとする代わりに。

$('select').focus(function () {
    var option = $(this).find("option[value*=Default]");
    option.attr('value', option.attr('value').replace(/_Default/g, ''));
});

ここに実際の例を投稿しました：http://jsfiddle.net/chayacooper/JHAPp/6/

于 2013-04-14T18:47:49.667 に答える