Question

我正在尝试使用articleNnumber的ID获取tr，以隐藏自身，直到从ID类型为select的select中选择Update或Clarification。我已经尝试了几个不同的jquery示例，我在这里找到但是我的生活不能让它工作并决定寻求帮助

  <form id="test">
            <table id="article">
                <tr>
                <th>Name:</th>
                <td><input type="text" name="name" placeholder="Frist and Lastname" /></td>
                </tr>
                <tr>
                <th>Account:</th>
                <td><select name="client">
                        <option value="">Select an Account:</option>
                        <option value="test1">test 1</option>
                        <option value-"test2">test</option>
                    </select>
               </td>
               <tr>
               <th>Type:</th>
               <td><select id="type">
                        <option value="">Select One...</option>
                        <option value="new">New</option>
                        <option value="update">Update</option>
                        <option value="clarify">Clarification</option>
                    </select>
                </td>
                <tr id="articleNumber">>
                    <th>Article Number:</th>
                    <td><input type="text" name="article" placeholder="Enter Article" /></td>
                </tr>
                <tr>
                </tr>

    </table>
        </form>

Answer 1

如果用户切换远离“更新”或“澄清”，我假设您还要隐藏此元素

首先隐藏articleNumber

<tr id="articleNumber" hidden>

添加以下JQuery

$(function(){
    $('#type').change(function() {       
        if($(this).val() === 'update' || $(this).val() === 'clarification') {
            $('#articleNumber').show();
        } else {
            $('#articleNumber').hide();
        }
    });
});

JSFiddle Link

Answer 2

是的，有可能，默认隐藏文章行并使用以下js代码

$('select').on('change', function() {
   if($(this).val()!='new'){
       $("#articleNumber").show();
   }else{
       $("#articleNumber").hide();
   }
});

Demo

使用选择框使用JQuery隐藏元素

2 个答案:

JSFiddle Link