Question

我无法访问html代码，我只能编辑JS文件。什么时候需要＆＃34;添加了<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

Answer 2

加载脚本时（不在表单提交功能中），您应该将required属性添加到.css-dropdowns。

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

$('.search_inventory_box form').submit(function(e) {    
    //...
});

Answer 3

这是我的答案很长

$('.search_inventory_box form').submit(function(e) {

if ( document.getElementsByName('make')[0].value == '' ){
    alert('Select make!');
    return false;
}
else if ( document.getElementsByName('condition')[0].value == '' ){
    alert('Select condition!');
    return false;
}
else if ( document.getElementsByName('model')[0].value == '' ){
    alert('Select model!');
    return false;
}
else if ( document.getElementsByName('transmission')[0].value == '' ){
    alert('Select transmission!');
    return false;
}
else if ( document.getElementsByName('yr[]')[0].value == '' ){
    alert('Select min year!');
    return false;
}

else if ( document.getElementsByName('yr[]')[1].value == '' ){
    alert('Select max year!');
    return false;
}
    console.log('fwef');


    $('.search_inventory_box form select[value=""]').attr('name', '');

    $(this).find("select option:selected").each( function(index, element){
        $(this).val($(this).data('key'));
    });
});

使用javascript选择提交时需要选项

3 个答案: