Saya sedang membangun acara/sembunyikan pilih di mana pilihan sekunder akan ditampilkan berdasarkan opsi pertama. Nilai yang dipilih kemudian dicetak dalam div terpisah di bawah ini.

Satu-satunya hal yang saya tidak bisa lakukan adalah bagaimana mengatur ulang semuanya. Ketika pilihan pertama diubah, semua pilihan sekunder harus menjadi default dan div yang dicetak harus disembunyikan.

Saya telah membaca berbagai solusi dalam Posting BEGITU dan mencoba beberapa tanpa hasil. Apakah saya benar dalam berpikir itu harus tepat sebelum pernyataan if pertama?

Kode saya:

$(document).ready(function() {

  $("#course select").on('change', function() {
    if ($(this).val() === "Phase1") {
      $("#dipOp").show();
      $("#degOp").show();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase2") {
      $("#dipOp").show();
      $("#degOp").hide();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase3") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase4") {
      $("#dipOp").show();
      $("#degOp").show();
      $("#english").hide();
      $("#fy").hide();
    } else if ($(this).val() === "Phase5") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#fy").show();
      $("#english").show();
    } else if ($(this).val() === "Phase6") {
      $("#dipOp").hide();
      $("#degOp").hide();
      $("#fy").show();
      $("#english").show();
    } else if ($(this).val() === "Phase7") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#fy").show();
      $("#english").hide();
    }
  });
  
  $("#dipOp select").on('change', function() {
    $('.dipOp').hide();
    $('#' + $(this).val()).show();
  });
  
  $("#degOp select").on('change', function() {
    $('.degOp').hide();
    $('#' + $(this).val()).show();
  });
          
});
.dipOp span, #english span, .degOp span, #fy span {display:inline-block; background:#0080b0; padding:10px; color:#ffffff;}
#dipOp, #degOp, #english, #fy {display: none}
select {margin-bottom:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="course">
  <select name="Course">
    <option value="empty">Select your packaged offer</option>
    <option value="Phase1">English + Diploma 1 and 2 + University degree</option>
    <option value="Phase1">English + Diploma 2 + University degree</option>
    <option value="Phase2">English + Diploma Parts 1 and 2</option>
    <option value="Phase2">English + Diploma Part 2</option>
    <option value="Phase3">English + University degree</option>
    <option value="Phase4">Diploma Parts 1 and 2 + University degree</option>
    <option value="Phase4">Diploma Part 2 + University degree</option>
    <option value="Phase5">English + Foundation Year + University degree</option>
    <option value="Phase6">English + Foundation Year</option>
    <option value="Phase7">Foundation Year + University degree</option>
  </select>
</div>

<div id="dipOp">
    <select Name="Diploma options">
        <option value="empty">Select your diploma</option>
        <option value="dip1">Diploma of Arts and Design</option>
        <option value="dip2">Diploma of Arts (Communication, Journalism and Psychology)</option>
        <option value="dip3">Diploma of Arts (Education)</option>
        <option value="dip4">Diploma of Business (Business stream)</option>
        <option value="dip5">Diploma of Business (Business Education)</option>
        <option value="dip6">Diploma of Business (Commerce stream)</option>
        <option value="dip7">Diploma of Business (Commerce Education)</option>
        <option value="dip8">Diploma of Engineering Studies</option>
        <option value="dip9">Diploma of Science</option>
        <option value="dip10">Diploma of Science (Education)</option>
    </select>
 </div>
  
 <div id="degOp">
    <select Name="Degree options">
        <option value="empty">Select your degree</option>
        <option value="deg1">Bachelor of Emergency Health (Paramedic) (Honours)</option>
        <option value="deg2">Bachelor of Health Science (Honours)</option>
        <option value="deg3">Bachelor of Music (Honours)</option>
        <option value="deg4">Bachelor of International Business</option>
        <option value="deg5">Bachelor of Business and Bachelor of International Business</option>
        <option value="deg6">Bachelor of Information Technology (Honours)</option>
        <option value="deg7">Bachelor of Computer Science (Honours)</option>
        <option value="deg8">Bachelor of Architectural Design</option>
        <option value="deg9">Bachelor of Communication Design</option>
        <option value="deg10">Bachelor of Industrial Design</option>
    </select>
</div>
<!-- English -->
<div id="english"><p><span>English</span></p></div>
<!-- FY -->
<div id="fy"><p><span>Foundation Year</span></p></div>
<!-- Diplomas -->
<div id="dip1" class="dipOp" style="display:none"><p><span>Diploma of Arts and Design</span></p></div>
<div id="dip2" class="dipOp" style="display:none"><p><span>Diploma of Arts (Communication, Journalism and Psychology)</span></p></div>
<div id="dip3" class="dipOp" style="display:none"><p><span>Diploma of Arts (Education)</span></p></div>
<div id="dip4" class="dipOp" style="display:none"><p><span>Diploma of Business (Business stream)</span></p></div>
<div id="dip5" class="dipOp" style="display:none"><p><span>Diploma of Business (Business Education)</span></p></div>
<div id="dip6" class="dipOp" style="display:none"><p><span>Diploma of Business (Commerce stream)</span></p></div>
<div id="dip7" class="dipOp" style="display:none"><p><span>Diploma of Business (Commerce Education</span></p></div>
<div id="dip8" class="dipOp" style="display:none"><p><span>Diploma of Engineering Studies</span></p></div>
<div id="dip9" class="dipOp" style="display:none"><p><span>Diploma of Science</span></p></div>
<div id="dip10" class="dipOp" style="display:none"><p><span>Diploma of Science (Education)</span></p></div>
<!-- Degrees -->
<div id="deg1" class="degOp" style="display:none"><p><span>Bachelor of Emergency Health (Paramedic) (Honours)</span></p></div>
<div id="deg2" class="degOp" style="display:none"><p><span>Bachelor of Health Science (Honours)</span></p></div>
<div id="deg3" class="degOp" style="display:none"><p><span>Bachelor of Music (Honours)</span></p></div>
<div id="deg4" class="degOp" style="display:none"><p><span>Bachelor of International Business</span></p></div>
<div id="deg5" class="degOp" style="display:none"><p><span>Bachelor of Business and Bachelor of International Business</span></p></div>
<div id="deg6" class="degOp" style="display:none"><p><span>Bachelor of Information Technology (Honours)</span></p></div>
<div id="deg7" class="degOp" style="display:none"><p><span>Bachelor of Computer Science (Honours)</span></p></div>
<div id="deg8" class="degOp" style="display:none"><p><span>Bachelor of Architectural Design</span></p></div>
<div id="deg9" class="degOp" style="display:none"><p><span>Bachelor of Communication Design</span></p></div>
<div id="deg10" class="degOp" style="display:none"><p><span>Bachelor of Industrial Design</span></p></div>
3
Ed A 17 Agustus 2017, 05:37

2 jawaban

Jawaban Terbaik

Apakah saya benar dalam berpikir itu harus tepat sebelum pernyataan if pertama?

Sangat! Hal pertama yang ingin Anda lakukan pada perubahan pilihan pertama adalah mengatur ulang semuanya, dengan mengatur nilai dari dua pilihan lainnya kembali ke empty, dan menyembunyikannya, serta semua hal lain yang disembunyikan pada awalnya.

Untuk membuat tugas ini sedikit lebih mudah, saya membungkus ijazah dan gelar Anda dalam div, sehingga Anda dapat menyembunyikan semua ijazah sekaligus dengan $('#diplomas div').hide();.

$(document).ready(function() {
  $("#course select").on('change', function() {
  
    //reset
    $("#dipOp select, #degOp select").val('empty');
    $("#dipOp, #degOp").hide();
    $("#english, #fy").hide();
    $("#diplomas div, #degrees div").hide();
     
    if ($(this).val() === "Phase1") {
      $("#dipOp").show();
      $("#degOp").show();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase2") {
      $("#dipOp").show();
      $("#degOp").hide();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase3") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#english").show();
      $("#fy").hide();
    } else if ($(this).val() === "Phase4") {
      $("#dipOp").show();
      $("#degOp").show();
      $("#english").hide();
      $("#fy").hide();
    } else if ($(this).val() === "Phase5") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#fy").show();
      $("#english").show();
    } else if ($(this).val() === "Phase6") {
      $("#dipOp").hide();
      $("#degOp").hide();
      $("#fy").show();
      $("#english").show();
    } else if ($(this).val() === "Phase7") {
      $("#dipOp").hide();
      $("#degOp").show();
      $("#fy").show();
      $("#english").hide();
    }
  });
  
  $("#dipOp select").on('change', function() {
    $('.dipOp').hide();
    $('#' + $(this).val()).show();
  });
  
  $("#degOp select").on('change', function() {
    $('.degOp').hide();
    $('#' + $(this).val()).show();
  });
          
});
.dipOp span, #english span, .degOp span, #fy span {display:inline-block; background:#0080b0; padding:10px; color:#ffffff;}
#dipOp, #degOp, #english, #fy {display: none}
select {margin-bottom:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="course">
  <select name="Course">
    <option value="empty">Select your packaged offer</option>
    <option value="Phase1">English + Diploma 1 and 2 + University degree</option>
    <option value="Phase1">English + Diploma 2 + University degree</option>
    <option value="Phase2">English + Diploma Parts 1 and 2</option>
    <option value="Phase2">English + Diploma Part 2</option>
    <option value="Phase3">English + University degree</option>
    <option value="Phase4">Diploma Parts 1 and 2 + University degree</option>
    <option value="Phase4">Diploma Part 2 + University degree</option>
    <option value="Phase5">English + Foundation Year + University degree</option>
    <option value="Phase6">English + Foundation Year</option>
    <option value="Phase7">Foundation Year + University degree</option>
  </select>
</div>

<div id="dipOp">
    <select Name="Diploma options">
        <option value="empty">Select your diploma</option>
        <option value="dip1">Diploma of Arts and Design</option>
        <option value="dip2">Diploma of Arts (Communication, Journalism and Psychology)</option>
        <option value="dip3">Diploma of Arts (Education)</option>
        <option value="dip4">Diploma of Business (Business stream)</option>
        <option value="dip5">Diploma of Business (Business Education)</option>
        <option value="dip6">Diploma of Business (Commerce stream)</option>
        <option value="dip7">Diploma of Business (Commerce Education)</option>
        <option value="dip8">Diploma of Engineering Studies</option>
        <option value="dip9">Diploma of Science</option>
        <option value="dip10">Diploma of Science (Education)</option>
    </select>
 </div>
  
 <div id="degOp">
    <select Name="Degree options">
        <option value="empty">Select your degree</option>
        <option value="deg1">Bachelor of Emergency Health (Paramedic) (Honours)</option>
        <option value="deg2">Bachelor of Health Science (Honours)</option>
        <option value="deg3">Bachelor of Music (Honours)</option>
        <option value="deg4">Bachelor of International Business</option>
        <option value="deg5">Bachelor of Business and Bachelor of International Business</option>
        <option value="deg6">Bachelor of Information Technology (Honours)</option>
        <option value="deg7">Bachelor of Computer Science (Honours)</option>
        <option value="deg8">Bachelor of Architectural Design</option>
        <option value="deg9">Bachelor of Communication Design</option>
        <option value="deg10">Bachelor of Industrial Design</option>
    </select>
</div>
<!-- English -->
<div id="english"><p><span>English</span></p></div>
<!-- MUFY -->
<div id="fy"><p><span>Foundation Year</span></p></div>
<!-- Diplomas -->
<div id="diplomas">
  <div id="dip1" class="dipOp" style="display:none"><p><span>Diploma of Arts and Design</span></p></div>
  <div id="dip2" class="dipOp" style="display:none"><p><span>Diploma of Arts (Communication, Journalism and Psychology)</span></p></div>
  <div id="dip3" class="dipOp" style="display:none"><p><span>Diploma of Arts (Education)</span></p></div>
  <div id="dip4" class="dipOp" style="display:none"><p><span>Diploma of Business (Business stream)</span></p></div>
  <div id="dip5" class="dipOp" style="display:none"><p><span>Diploma of Business (Business Education)</span></p></div>
  <div id="dip6" class="dipOp" style="display:none"><p><span>Diploma of Business (Commerce stream)</span></p></div>
  <div id="dip7" class="dipOp" style="display:none"><p><span>Diploma of Business (Commerce Education</span></p></div>
  <div id="dip8" class="dipOp" style="display:none"><p><span>Diploma of Engineering Studies</span></p></div>
  <div id="dip9" class="dipOp" style="display:none"><p><span>Diploma of Science</span></p></div></div>
  <div id="dip10" class="dipOp" style="display:none"><p><span>Diploma of Science (Education)</span></p></div>
<!-- Degrees -->
<div id="degrees">
  <div id="deg1" class="degOp" style="display:none"><p><span>Bachelor of Emergency Health (Paramedic) (Honours)</span></p></div>
  <div id="deg2" class="degOp" style="display:none"><p><span>Bachelor of Health Science (Honours)</span></p></div>
  <div id="deg3" class="degOp" style="display:none"><p><span>Bachelor of Music (Honours)</span></p></div>
  <div id="deg4" class="degOp" style="display:none"><p><span>Bachelor of International Business</span></p></div>
  <div id="deg5" class="degOp" style="display:none"><p><span>Bachelor of Business and   Bachelor of International Business</span></p></div>
  <div id="deg6" class="degOp" style="display:none"><p><span>Bachelor of Information Technology (Honours)</span></p></div>
  <div id="deg7" class="degOp" style="display:none"><p><span>Bachelor of Computer Science (Honours)</span></p></div>
  <div id="deg8" class="degOp" style="display:none"><p><span>Bachelor of Architectural Design</span></p></div>
  <div id="deg9" class="degOp" style="display:none"><p><span>Bachelor of Communication Design</span></p></div>
  <div id="deg10" class="degOp" style="display:none"><p><span>Bachelor of Industrial Design</span></p></div>
</div>
2
Chava Geldzahler 17 Agustus 2017, 03:18

Saat mengubah hal pertama yang perlu Anda lakukan adalah menyembunyikan semua pilihan Anda, semua opsi yang dipilih sebelumnya ditampilkan (div 'derajat' (label biru)), dan kemudian JUGA mengatur ulang pilihan menjadi kosong (sehingga Anda dapat memulai dari awal lagi) .

  $("#course select").on('change', function() {
       //Right here is where you want to make sure you reset everything
       //Hide all previous deg10,deg1 selected too
       // reset all selects to empty
        if ($(this).val() === "Phase1") {

        }
  } 

Untuk semua div biru 'derajat' Anda yang menunjukkan .. Anda harus membungkus semuanya dalam div untuk memudahkan akses jQuery untuk menyembunyikannya. Silakan lihat pembungkus saya yang saya buat di html, yang membungkus semua derajat berlabel biru Anda. <div class='degree_container'> dan kode di jsfiddle ini. Itu seharusnya membuat Anda mendapatkan apa yang Anda inginkan. https://jsfiddle.net/t3dmspnp/1/

1
lscmaro 17 Agustus 2017, 03:06