0

複数の選択オプションリストと非表示選択オプションを使用するphpプロジェクトのオンライン予約フォームを開発しています。

検証が失敗した後、選択オプションから値を保持することに問題があります。

私の選択オプションは、このフィドルのようにトリガーされます。

最初の選択オプション値が 2 番目の選択オプションをトリガーし、次に 2 番目の選択オプション値が画像をトリガーします。1 番目の選択オプションの値は保持されますが、2 番目の選択オプションの値はリセットされます。

値を保持できますが、ユーザーが他のオプションに変更したい場合、古いオプションの値はそのまま残り、新しい値が追加されます。私が望むのは、ユーザーが他のオプションを変更すると、自動的に null にリセットされますが、検証が失敗した後も保持されます。

このjqueryで明確な値を使用しています:

$(document).ready(function(){
  $('#Service').change(function(){    
  $('#selectOp1').prop('selectedIndex',0);
  $('#selectOp2').prop('selectedIndex',0);
  $('#selectOp3').prop('selectedIndex',0);
  $('div.second-level-container').children().hide(); //this one for hide the image
)};

しかし、検証が失敗すると、選択した値も消えてしまい、これは非常にイライラします。誰かが私が持っている選択肢を教えてもらえますか、私はjqueryが初めてです

4

1 に答える 1

0 
//You can try this this will reset your select box values also 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#Rank').bind('change', function() {
        var elements = $('div.container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected

            elements.filter('.' + value).show(); // show the ones we want

            $('div.container div').children().each(function(){

                $.each(this.attributes, function(i, attrib){

                   if(attrib.name != value)
                   {
                       $('#'+value).prop('selectedIndex',0);
                   }

                  });
             });

            var elements = $('div.second-level-container').children().hide(); // hide all the elements

         //master reset
        }else{

            $('#airman').prop('selectedIndex',0);

            $('#senior-airman').prop('selectedIndex',0);

            var elements = $('div.second-level-container').children().hide();            
        }

    }).trigger('change');

    $('.second-level-select').bind('change', function() {
        var elements = $('div.second-level-container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want

        //reset the child and      
        }else{

            var elements = $('div.second-level-container').children().hide(); // hide all the elements
        }
    }).trigger('change');
});
</script>
<!-- Site JavaScript -->
<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="airman">Airman</option>
    <option value="senior-airman">Senior Airman</option>
</select>

<div class="container">
    <div class="airman">
        <select class="second-level-select" id='airman'>
            <option value="">-Select Your Rank-</option>
            <option value="basic-ore-1">Basic Ore Miner - Level 1</option>
            <option value="basic-ore-2">Basic Ore Miner - Level 2</option>
        </select>
    </div>
    <div class="senior-airman">
        <select class="second-level-select" id='senior-airman'>
            <option value="">-Select Your Rank-</option>
            <option value="omber-miner-1">Omber Miner - Level 1</option>
            <option value="omber-miner-2">Omber Miner - Level 2</option>
        </select>
    </div>
</div>

<div class="second-level-container">    
    <div class="basic-ore-1">
        Line of text for basic ore miner 1
    </div>
    <div class="basic-ore-2">
        Line of text for basic ore miner 2
    </div>
    <div class="omber-miner-1">
        Line of text for omber miner 1
    </div>
    <div class="omber-miner-2">
        Line of text for omber miner 2
    </div>    
</div>
于 2013-07-04T11:21:26.570 に答える