javascript - 检查是否选择了某个选项并编辑 HTML 标记

Question

我正在尝试检查我选择的选项是否已被选中。脚本非常简单:如果 <select>设置为other然后message字段变为必填字段(出现星号)。

它有效，但是......我想知道如果我们在同一页面中有 10 个这样的案例，如何组织它。

<div class="field-select">
   <label for="" class="field-label">Select an option : *</label>
   <select class="js-select-motif">
      <option value="">I am not satisfied with your services</option>
      <option value="other">Other</option>
   </select>
</div>

<div class="field-textarea">
   <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
   </div>
   <textarea name="" id="" class="js-textarea" placeholder="Add comment here"></textarea>
</div>

const $selectMotif = $('.js-select-motif');

if ($('.js-select-motif').length > 0) {
  $selectMotif.change(function () {
    if($selectMotif.val() == 'other') {
      $('.asterisk').removeClass('is-hidden');
    } else {
      $('.asterisk').addClass('is-hidden');
    }
  })
}

演示可在 Codepen 上获取

谢谢

Answer 1

基于我(希望是正确的)重新阅读问题的修改方法:

// here we find all <select> elements that contain an <option> whose
// value is equal to "other", and then we bind the anonymous function
// of the on() method as the event-handler for the 'change' event:
$('select:has(option[value="other"])').on('change', function() {

  // we cache the $(this) jQuery object in the similarly-named
  // $this variable:
  const $this = $(this);

  // from the $(this) we navigate to the closest <div> and then
  // to the next sibling element:
  $this.closest('div').next()
    // within that sibling we find the descendant elements which
    // match the supplied selector:
    .find('.asterisk')
    // and then we toggle the 'is-hidden' class according to the
    // switch; if $(this).val() is anything other than 'other'
    // the 'is-hidden' class will be applied; if the value is
    // equal to 'other' the assessment will be false, and the
    // 'is-hidden' class will be removed (making the asterisk
    // visible):
    .toggleClass('is-hidden', $this.val() !== 'other');

  // here we trigger the change() event on page-load to show/hide
  // appropriately:
}).change();

.asterisk {
  color: red;
  font-weight: bold;
}
.asterisk.is-hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="other">Other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="other">Other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="no other">No other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

JS Fiddle demo .

使用纯 JavaScript，另一种方法可以是:

// find all <select> elements with an option of 'other':
// here we use spread syntax ('...') to convert the NodeList of <option> elements
// returned by document.querySelectorAll() into an Array:
const selects = [...document.querySelectorAll('option')].filter(
    // we filter that Array to retain only the <option> elements
    // whose value property is equal to 'other':
    (opt) => opt.value === 'other'
  ).map(
    // we then create an Array of <select> elements, using 
    // Element.closest() to navigate up through the DOM to
    // the closest element that matches the supplied selector:
    (opt) => opt.closest('select')
  ),
  // here we define the function that will handle the show/hide of the
  // relevant element(s); the Event Object is passed to the function
  // automatically from the later use of EventTarget.addEventListener():
  toggleMessage = (event) => {

    // we retrieve the eleemt to which the event was bound (the <select>
    // element in this case):
    const changed = event.currentTarget,

      // we find the nextElementSibling (because there's no other relationship
      // we're dependant on the DOM structure to identify which textarea element
      // is related to which <select> element):
      neighbour = changed.closest('.field-select').nextElementSibling,

      // we find all descendant elements of the neigbour that match
      // the supplied selector (if you know for certain there will
      // only ever be one matching element then you could instead use
      // neighbour.querySelector('.asterisk'), which will return only
      // the first matching element or null if none are found):
      asterisks = neighbour.querySelectorAll('.asterisk'),

      // we derive a Boolean (true/false) from the assessment of the value
      // of the <select> element:
      boolSwitch = changed.value !== 'other';

    // because we used document.querySelectorAll() we have to iterate over
    // the returned NodeList, using NodeList.prototype.forEach():
    asterisks.forEach(
      // here 'aster' is a reference to the current Node in the NodeList
      // over whcih we're iterating; we use Element.classList API to toggle
      // the 'is-hidden' class depending on the boolSwitch. If the boolSwitch
      // is true (and the <select> value is _not_ 'other') we add the class-name
      // otherwise we remove it (adding an already-present class, or removing
      // an already-absent class causes no error):
      (aster) => aster.classList.toggle('is-hidden', boolSwitch)
    );

  },

  // in order to trigger the event, so that the elements are shown/hidden
  // on page-load, we create change Event object:
  changeEvent = new Event('change');

// here we iterate over the <selct> elements found eariler:
selects.forEach(
  (select) => {
    // here we add the toggleMessagE() function as the event-handler for
    // the 'change' event:
    select.addEventListener('change', toggleMessage);

    // we triogger the custom change event to trigger the appropriate
    // display state on page-load:
    select.dispatchEvent(changeEvent);
  });

.asterisk {
  color: red;
  font-weight: bold;
}

.asterisk.is-hidden {
  display: none;
}

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="other">Other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="other">Other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="no other">No other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

JS Fiddle demo .

<小时/>

下面的原始答案，这是我对问题的误读(尽管它可能对不同上下文中的其他人有用):

一种方法，使用纯 JavaScript:

// find all <select> elements with an option of 'other':
// here we use spread syntax ('...') to convert the NodeList of <option> elements
// returned by document.querySelectorAll() into an Array:
const selects = [...document.querySelectorAll('option')].filter(
    // we filter that Array to retain only the <option> elements
    // whose value property is equal to 'other':
    (opt) => opt.value === 'other'
  ).map(
    // we then create an Array of <select> elements, using 
    // Element.closest() to navigate up through the DOM to
    // the closest element that matches the supplied selector:
    (opt) => opt.closest('select')
  ),
  // here we define the function that will handle the show/hide of the
  // relevant element(s); the Event Object is passed to the function
  // automatically from the later use of EventTarget.addEventListener():
  toggleMessage = (event) => {

    // we retrieve the eleemt to which the event was bound (the <select>
    // element in this case):
    const changed = event.currentTarget,

      // we find the nextElementSibling (because there's no other relationship
      // we're dependant on the DOM structure to identify which textarea element
      // is related to which <select> element):
      neighbour = changed.closest('.field-select').nextElementSibling,

      // we derive a Boolean (true/false) from the assessment of the value
      // of the <select> element:
      boolSwitch = changed.value === 'other';

    // we update the display of the relevant neighbour element, uisng a
    // conditional ('ternary') operator; if the boolSwitch is true then
    // the display is updated to 'block', otherwise it's updated to 'none':
    neighbour.style.display = boolSwitch ? 'block' : 'none';

  },

  // in order to trigger the event, so that the elements are shown/hidden
  // on page-load, we create change Event object:
  changeEvent = new Event('change');

// here we iterate over the <selct> elements found eariler:
selects.forEach(
  (select) => {
    // here we add the toggleMessagE() function as the event-handler for
    // the 'change' event:
    select.addEventListener('change', toggleMessage);

    // we triogger the custom change event to trigger the appropriate
    // display state on page-load:
    select.dispatchEvent(changeEvent);
  });

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="other">Other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="other">Other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="no other">No other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

JS Fiddle demo .

或者，使用 jQuery:

// here we find all <select> elements that contain an <option> whose
// value is equal to "other", and then we bind the anonymous function
// of the on() method as the event-handler for the 'change' event:
$('select:has(option[value="other"])').on('change', function() {

  // we cache the $(this) in a similarly-named variable:
  const $this = $(this);

  // we navigate from the $(this) to the closest ancestor <div>
  // element, then to the next sibling element and bind the toggle()
  // method to it, uisng the switch option:
  $this.closest('div').next().toggle(
    // here we hide the <div> element if the current value of the
    // <select> is 'other' (the 'switch' evaluates to true); or
    // show it if the switch evaluates to false
    $this.val() === 'other'
  );

  // here we trigger the change() event on page-load to show/hide
  // appropriately:
}).change();

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="other">Other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="other">Other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

<div class="field-select">
  <label for="" class="field-label">Select an option : *</label>
  <select class="js-select-motif">
    <option value="">I am not satisfied with your services</option>
    <option value="no other">No other</option>
  </select>
</div>

<div class="field-textarea">
  <div class="field-label">Comment : <span class="asterisk is-hidden">*</span>
  </div>
  <textarea class="js-textarea" placeholder="Add comment here"></textarea>
</div>

JS Fiddle demo .

引用文献:

JavaScript:
• Array.prototype.filter() .
• Array.prototype.map() .
• Arrow function syntax .
• Conditional ('ternary') Operator .
• Document.querySelector() .
• Document.querySelectorAll() .
• Element.classList() API .
• Element.closest() .
• Event() constructor .
• Event.currentTarget .
• Event.target .
• EventTarget.addEventListener() .
• EventTarget.dispatchEvent() .
• HTMLOptionElement .
• NonDocumentTypeChildNode.nextElementSibling .
• Spread ([...]) syntax .
• jQuery:
  • change() .
  • closest() .
  • find() .
  • :has() selector .
  • next() .
  • on() .
  • toggle() .
  • toggleClass() .