Question

我正在尝试在下拉列表选项中显示/隐藏多个文本框。我有多个文本框和下拉菜单，以便在第一个下拉菜单中完成选择时显示。这是代码。在下面的代码中，如果我选择更新，当我选择expreienced时，应该隐藏其他文本框，其他文本框和其他下拉列表应该显示

$(document).ready(function() {
    $('#exp').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
        }
    }).trigger('change');
});
$("[name='Portfolio1']").change(function(){ 

    if($(this).val() == "" )
    {
        $('.other3').slideDown();
    }
    else
    {
         $('.other3').slideUp();
    }
     });

<label style="font-family:Trebuchet MS,Cambria;">   Work Experience:</label>
    <select id="exp" name="exp" placeholder="Enter number of experience" style="border: 1px solid #0d82b9;">
          <option  value="" >--Select--</option>
          <option value="Fresher">Fresher</option>
          <option value="Experience">Experience</option></select>

<div class="container">

    <div class="Experience" style="display:none;" >

      <label style="font-family:Trebuchet MS,Cambria;">If Experienced:</label>
      <div class="cbp-mc-column">
    <label style="font-family:Trebuchet MS,Cambria;">Portfolio: </label>

        <select id="Portfolio1" name="Portfolio1" style="border: 1px solid #0d82b9;">
        <option value="  ">--Select--</option>
            <option value="Receptionist">Receptionist</option>
            <option value="Data Operator">Data Operator</option>
            <option value="Courier Service">Courier Service</option>
            <option value="F&B Services">F&B Services</option>
             <option value="Call Center Executive">Call Center Executive</option>
            <option value="Beautician">Beautician</option>
            <option value="Electrician">Electrician</option>
            <option value="office Assistant">Office Assistant</option>
            <option value="">Other</option>
        </select>
    </div>
</div>
</div>
<div class="cbp-mc-column">
 <div class="other3" style="display:none;" >
    <label style="font-family:Trebuchet MS,Cambria;">If Others:</label>
        <input type="text" name="other3" id="other3"  maxlength="28" style="border: 1px solid #0d82b9;"></div>

    </div>
    <div class="cbp-mc-column">
<div class="container">

<div class="Experience" style="display:none;" >
    <label style="font-family:Trebuchet MS,Cambria;margin-top:-20px;">From:</label>
       <input type="text" name="date1" id="datepicker" style="border: 1px solid #0d82b9;border: 1px solid #0d82b9;"><br/>(Enter date in dd-mm-yyy format)</div></div></td></tr>
   </div>
  <div class="cbp-mc-column"> 
<div class="container">

<div class="Experience" style="display:none;" >
    <label style="font-family:Trebuchet MS,Cambria;">To:</label>
       <input type="text" name="date2" id="txt_date" style="border: 1px solid #0d82b9;border: 1px solid #0d82b9;"><br/>(Enter date in dd-mm-yyy format)</div></div></td></tr> 
    </div> 
    <div class="cbp-mc-column">
<div class="container">

<div class="Experience" style="display:none;" >
    <label style="font-family:Trebuchet MS,Cambria;">Type of Organization:</label>
        <input type="text" name="org1" id="org1"  style="border: 1px solid #0d82b9;"></div></div></div>

在下拉列表选择中显示/隐藏基于div的多个文本框

0 个答案: