11

選択要素 'parcel' を選択すると div が表示されるフォームを作成しようとしていますが、選択されていない場合は div を非表示にしたいと考えています。現時点での私のマークアップは次のとおりです。

これはこれまでの私のHTMLです..

    <div class="row">    
    Type
        <select name="type" id="type" style="margin-left:57px; width:153px;">
                <option ame="l_letter" value="l_letter">Large Letter</option>
                <option name="letter" value="letter">Letter</option>
                <option name="parcel" value="parcel">Parcel</option>
        </select>                    
</div>

<div class="row" id="row_dim">
    Dimensions
        <input type="text" name="length" style="margin-left:12px;" class="dimension" placeholder="Length">
        <input type="text" name="width" class="dimension" placeholder="Width">
        <input type="text" name="height" class="dimension" placeholder="Height">
</div>

これはこれまでのところ私のjQueryです..

  $(function() {
    $('#type').change(function(){
        $('#row_dim').hide(); 
        $("select[@name='parcel']:checked").val() == 'parcel').show();   
    });
});
4

9 に答える 9

44

次の JQuery を使用します。デモ

$(function() {
    $('#row_dim').hide(); 
    $('#type').change(function(){
        if($('#type').val() == 'parcel') {
            $('#row_dim').show(); 
        } else {
            $('#row_dim').hide(); 
        } 
    });
});
于 2013-09-02T11:49:22.240 に答える
3

試す：

if($("option[value='parcel']").is(":checked"))
   $('#row_dim').show();

あるいは：

$(function() {
    $('#type').change(function(){
        $('#row_dim')[ ($("option[value='parcel']").is(":checked"))? "show" : "hide" ]();  
    });
});

JSFiddle: http://jsfiddle.net/3w5kD/

于 2013-09-02T11:43:10.290 に答える
1

jquery メソッドを次のように変更します。

$(function () { /* DOM ready */
    $("#type").change(function () {
        alert('The option with value ' + $(this).val());
        //hide the element you want to hide here with
        //("id").attr("display","block"); // to show
        //("id").attr("display","none"); // to hide
    });
});
于 2013-09-02T11:44:04.527 に答える
0

新しいことは何もありませんが、jQuery コレクションをキャッシュすると、パフォーマンスがわずかに向上します

$(function() {

    var $typeSelector = $('#type');
    var $toggleArea = $('#row_dim');

    $typeSelector.change(function(){
        if ($typeSelector.val() === 'parcel') {
            $toggleArea.show(); 
        }
        else {
            $toggleArea.hide(); 
        }
    });
});

そして超高速のバニラJSで：

(function() {

    var typeSelector = document.getElementById('type');
    var toggleArea = document.getElementById('row_dim');

    typeSelector.onchange = function() {
        toggleArea.style.display = typeSelector.value === 'parcel'
            ? 'block'
            : 'none';
    };

});
于 2013-09-02T11:49:52.927 に答える
0

以下のJSを試してください

$(function() {
    $('#type').change(function(){
        $('#row_dim').hide(); 
        if ($(this).val() == 'parcel')
        {
             $('#row_dim').show();
        }
    });
});
于 2013-09-02T11:43:23.597 に答える
0

これを試して：

$(function() {
    $("#type").change(function() {
        if ($(this).val() === 'parcel') $("#row_dim").show();
        else $("#row_dim").hide();
    }
}
于 2013-09-02T11:43:30.950 に答える
0

これを試して：

 $(function () {
     $('#row_dim').hide(); // this line you can avoid by adding #row_dim{display:none;} in your CSS
     $('#type').change(function () {
         $('#row_dim').hide();
         if (this.options[this.selectedIndex].value == 'parcel') {
             $('#row_dim').show();
         }
     });
 });

デモはこちら

于 2013-09-02T11:46:04.883 に答える