當我嘗試使用id屬性而不是值時，Jquery選擇器停止作業-有解無憂

當我使用 value 而不是 id 例如 [value="' this.value '"] 時，一切正常，但在這種情況下，選擇器不起作用。

對不起，如果這是一個愚蠢的問題，但我是 jquery 的新手，我在 StackOverflow 上找不到與我的案例相關的資訊，所以我在這里發帖。

這是我的代碼：

var $select1 = $('#select1'),
  $select2 = $('#select2'),
  $select3 = $('#select3'),
  $select4 = $('#select4'),
  $select5 = $('#select5'),
  $select6 = $('#select6'),
  $select7 = $('#select7'),
  $options = $select2.find('option');
$options2 = $select3.find('option');
$options3 = $select4.find('option');
$options4 = $select5.find('option');
$options5 = $select6.find('option');
$options6 = $select7.find('option');

$select1.on('change', function() {
  $select2.html($options.filter('[id="'   this.id   '"]'));
  $select3.html($options2.filter('[id="'   this.id   '"]'));
  $select4.html($options3.filter('[id="'   this.id   '"]'));
  $select5.html($options4.filter('[id="'   this.id   '"]'));
  $select6.html($options5.filter('[id="'   this.id   '"]'));
  $select7.html($options6.filter('[id="'   this.id   '"]'));
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Select Service: *</label>
  <select class="form-select" size="3" id="select1" name="select1" required>
    <option value="softwaredevelopment" id="1">Software consulting</option>
    <option value="websites" id="2">Websites</option>
    <option value="qatesting" id="3">QA Testing</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select" id="select2" name="select2" required>
    <option value="consulting1-" id="1">Consulting 10</option>
    <option value="consulting20" id="1">Consulting 20</option>
    <option value="consulting30" id="1">Consulting 30</option>
    <option value="1-20pages" id="2">1-20 Pages</option>
    <option value="10-50pages" id="2">10-50 Pages</option>
    <option value="50-250pages" id="2">50-150 Pages</option>
    <option value="150-250pages" id="2">150-250 Pages</option>
    <option value="qa50" id="3">qa 50</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select" id="select3" name="select3" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="nodesignneeded" id="2">No Design Needed</option>
    <option value="simpledesign" id="2">Simple Design</option>
    <option value="moderatelystylizeddesign" id="2">Moderately Stylized Design</option>
    <option value="highenddesign" id="2">High End Design</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select" id="select4" name="select4" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="notresponsivedesign" id="2">Not Responsive Design</option>
    <option value="responsivedesign" id="2">Responsive Design</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select" id="select5" name="select5" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="nodatabaseintegration" id="2">No Database Integration</option>
    <option value="basicdatabaseintegration" id="2">Basic Database Integration</option>
    <option value="advanceddatabaseintegration" id="2">Advanced Database Integration</option>
    <option value="fulldatabasedevelopment" id="2">Full Database Development</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select" id="select6" name="select6" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="noecommercefunctionality" id="2">No Ecommerce Functionality</option>
    <option value="basicecommercefunctionality" id="2">Basic Ecommerce Functionality</option>
    <option value="advancedecommercefunctionality" id="2">Advanced Ecommerce Functionality</option>
    <option value="enterpriseecommercefunctionality" id="2">Enterprise Ecommerce Functionality</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select" id="select7" name="select7" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="nocms" id="2">No CMS</option>
    <option value="basiccms" id="2">Basic CMS</option>
    <option value="advancedcms" id="2">Advanced CMS</option>
    <option value="enterprisecms" id="2">Enterprise CMS</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>

uj5u.com熱心網友回復：

ID 應該是唯一的，因此您不能id="1"在多個選項中使用相同的 ID。使用類而不是 ID。

在change事件偵聽器中，this是<select>，而不是選定的選項。下拉串列的 ID 也是如此this.id，而不是選項。使用this.value.

為了使它適合在一起，其他下拉串列中的選項類應該與select1.

您可以隱藏和顯示每個類中的選項，而不是將所有選項保存在變數中。這允許您對所有下拉選單使用相同的代碼，方法是為它們提供相同的類。

var $select1 = $('#select1');

$select1.on('change', function() {
  if (this.value) {
    $(".dependent-select option").hide();
    $(`.dependent-select option.${this.value}`).show();
  } else {
    $(".dependent-select option").show();
  }
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Select Service: *</label>
  <select class="form-select" size="3" id="select1" name="select1" required>
    <option value="softwaredevelopment">Software consulting</option>
    <option value="websites">Websites</option>
    <option value="qatesting">QA Testing</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select dependent-select" id="select2" name="select2" required>
    <option value="">Select...</option>
    <option value="consulting1-" class="softwaredevelopment">Consulting 10</option>
    <option value="consulting20" class="softwaredevelopment">Consulting 20</option>
    <option value="consulting30" class="softwaredevelopment">Consulting 30</option>
    <option value="1-20pages" class="websites">1-20 Pages</option>
    <option value="10-50pages" class="websites">10-50 Pages</option>
    <option value="50-250pages" class="websites">50-150 Pages</option>
    <option value="150-250pages" class="websites">150-250 Pages</option>
    <option value="qa50" class="qatesting">qa 50</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select dependent-select" id="select3" name="select3" required>
    <option value="">Select...</option>
    <option value="consulting510" class="softwaredevelopment">Consulting 510</option>
    <option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
    <option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
    <option value="nodesignneeded" class="websites">No Design Needed</option>
    <option value="simpledesign" class="websites">Simple Design</option>
    <option value="moderatelystylizeddesign" class="websites">Moderately Stylized Design</option>
    <option value="highenddesign" class="websites">High End Design</option>
    <option value="qa53210" class="qatesting">qa 53210</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select dependent-select" id="select4" name="select4" required>
    <option value="">Select...</option>
    <option value="consulting510" class="softwaredevelopment">Consulting 510</option>
    <option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
    <option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
    <option value="notresponsivedesign" class="websites">Not Responsive Design</option>
    <option value="responsivedesign" class="websites">Responsive Design</option>
    <option value="qa53210" class="qatesting">qa 53210</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select dependent-select" id="select5" name="select5" required>
    <option value="">Select...</option>
    <option value="consulting510" class="softwaredevelopment">Consulting 510</option>
    <option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
    <option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
    <option value="nodatabaseintegration" class="websites">No Database Integration</option>
    <option value="basicdatabaseintegration" class="websites">Basic Database Integration</option>
    <option value="advanceddatabaseintegration" class="websites">Advanced Database Integration</option>
    <option value="fulldatabasedevelopment" class="websites">Full Database Development</option>
    <option value="qa53210" class="qatesting">qa 53210</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select dependent-select" id="select6" name="select6" required>
    <option value="">Select...</option>
    <option value="consulting510" class="softwaredevelopment">Consulting 510</option>
    <option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
    <option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
    <option value="noecommercefunctionality" class="websites">No Ecommerce Functionality</option>
    <option value="basicecommercefunctionality" class="websites">Basic Ecommerce Functionality</option>
    <option value="advancedecommercefunctionality" class="websites">Advanced Ecommerce Functionality</option>
    <option value="enterpriseecommercefunctionality" class="websites">Enterprise Ecommerce Functionality</option>
    <option value="qa53210" class="qatesting">qa 53210</option>
  </select>
</div>
<div class="form-group">
  <select class="form-select dependent-select" id="select7" name="select7" required>
    <option value="">Select...</option>
    <option value="consulting510" class="softwaredevelopment">Consulting 510</option>
    <option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
    <option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
    <option value="nocms" class="websites">No CMS</option>
    <option value="basiccms" class="websites">Basic CMS</option>
    <option value="advancedcms" class="websites">Advanced CMS</option>
    <option value="enterprisecms" class="websites">Enterprise CMS</option>
    <option value="qa53210" class="qatesting">qa 53210</option>
  </select>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418590.html

標籤：

上一篇：jQuery-已宣告就緒函式內的函式，但從不讀取值

下一篇：如何使用陣列從谷歌制作散點圖？