javascript - 选择使用 javascript 提交时所需的选项

Question

我没有访问 html 代码的权限，我只能编辑 JS 文件。当 <select> 为“必需”属性时添加后它可以工作，但我如何使用 JavaScript 实现它？

我试过这个:

document.querySelector('.css-dropdowns').required = true;

没用

请看一下 jsfiddle

Answer 1

querySelector只会从 DOM 中选择第一个匹配的元素。

使用querySelectorAll获取所有匹配元素并遍历集合并添加 required 属性。

var allEls = document.querySelectorAll('.css-dropdowns');

for (var i = 0; i < allEls.length; i++) {
    allEls[i].required = 'required';
}

Fiddle

var allEls = document.querySelectorAll('.css-dropdowns');

for (var i = 0; i < allEls.length; i++) {
  allEls[i].required = 'required';
}

<div class="search-form search_inventory_box row  styled_input">
  <form method="get" action="#">
    <input type='hidden' name='page_id' value=''>
    <div class="col-md-6 clearfix">
      <div class="my-dropdown make-dropdown make-dropdown">
        <select name='make' class='css-dropdowns' data-sort='make' data-prefix='' data-label-singular='Make' data-label-plural='Makes' data-no-options='No options'>
          <option value=''>Make</option>
          <option value='Nissan' data-key='nissan'>Nissan</option>
          <option value='Porsche' data-key='porsche'>Porsche</option>
        </select>
      </div>
      <div class="my-dropdown model-dropdown make-dropdown">
        <select name='model' class='css-dropdowns' data-sort='model' data-prefix='' data-label-singular='Model' data-label-plural='Models' data-no-options='No options'>
          <option value=''>Model</option>
          <option value='Boxster' data-key='boxster'>Boxster</option>
          <option value='Carrera' data-key='carrera'>Carrera</option>
          <option value='Cayenne' data-key='cayenne'>Cayenne</option>
          <option value='GTR' data-key='gtr'>GTR</option>
          <option value='GTS' data-key='gts'>GTS</option>
        </select>
      </div>
      <div class="my-dropdown transmission-dropdown make-dropdown">
        <select name='transmission' class='css-dropdowns' data-sort='transmission' data-prefix='' data-label-singular='Transmission' data-label-plural='Transmissions' data-no-options='No options'>
          <option value=''>Transmission</option>
          <option value='5-Speed Automatic' data-key='5-speed-automatic'>5-Speed Automatic</option>
          <option value='5-Speed Manual' data-key='5-speed-manual'>5-Speed Manual</option>
          <option value='6-Speed Automatic' data-key='6-speed-automatic'>6-Speed Automatic</option>
          <option value='6-Speed Manual' data-key='6-speed-manual'>6-Speed Manual</option>
          <option value='6-Speed Manual|6-Speed Manual' data-key='6-speed-manual-6-speed-manual'>6-Speed Manual|6-Speed Manual</option>
          <option value='6-Speed Semi-Auto' data-key='6-speed-semi-auto'>6-Speed Semi-Auto</option>
          <option value='8-Speed Automatic' data-key='8-speed-automatic'>8-Speed Automatic</option>
        </select>
      </div>
      <div class='clearfix'></div>
    </div>
    <div class="col-md-6 clearfix">
      <div class="my-dropdown condition-dropdown make-dropdown">
        <select name='condition' class='css-dropdowns' data-sort='condition' data-prefix='' data-label-singular='Condition' data-label-plural='Conditions' data-no-options='No options'>
          <option value=''>Condition</option>
          <option value='Brand New' data-key='brand-new'>Brand New</option>
          <option value='Slightly Used' data-key='slightly-used'>Slightly Used</option>
        </select>
      </div>
      <div class='multiple_dropdowns'>
        <div class="my-dropdown make-dropdown">
          <select name='yr[]' class='css-dropdowns' data-sort='year' data-prefix='' data-label-singular='Year' data-label-plural='Years' data-no-options='No options'>
            <option value=''>Min Year</option>
            <option value='2009' data-key='2009'>2009</option>
            <option value='2010' data-key='2010'>2010</option>
            <option value='2013' data-key='2013'>2013</option>
            <option value='2014' data-key='2014'>2014</option>
            <option value='2014|2014' data-key='2014-2014'>2014|2014</option>
            <option value='2015' data-key='2015'>2015</option>
            <option value='Horsepower' data-key='horsepower'>Horsepower</option>
          </select>
        </div><span class="my-dropdown-between">to</span>

        <div class="my-dropdown make-dropdown">
          <select name='yr[]' class='css-dropdowns' data-sort='year' data-prefix='' data-label-singular='Year' data-label-plural='Years' data-no-options='No options'>
            <option value=''>Max Year</option>
            <option value='2009' data-key='2009'>2009</option>
            <option value='2010' data-key='2010'>2010</option>
            <option value='2013' data-key='2013'>2013</option>
            <option value='2014' data-key='2014'>2014</option>
            <option value='2014|2014' data-key='2014-2014'>2014|2014</option>
            <option value='2015' data-key='2015'>2015</option>
            <option value='Horsepower' data-key='horsepower'>Horsepower</option>
          </select>
        </div>
      </div>
      <input class='full-width' type='search' name='keywords' value='' placeholder='Refine with keywords'>
      <div class='clearfix'></div>
    </div>
    <div class="col-md-12 clearfix search_categories">
      <div class='clearfix'></div>
    </div>
    <div class="form-element pull-right margin-right-10 col-md-12">
      <input type="submit" value="GIVE ME A GOOD PRICE" class="find_new_vehicle pull-right">
      <div class="loading_results pull-right"><i class="fa fa-circle-o-notch fa-spin"></i>

      </div>
    </div>
  </form>
</div>

---

如果在页面上加载了 jQuery，则使用

$('.css-dropdowns').attr('required', 'required');

Updated Fiddle