':selected' is not a valid selector-CodePudding

i was trying to make a button onclick check so that lists' option classes weren't same:

<select name="names1" id="names1">
   <option value="1" >option 1</option>
   <option value="2" >option 2</option>
   <option value="3" >option 3</option>
</select>
<select name="names2" id="names2">
   <option value="1" >option 1</option>
   <option value="2" >option 2</option>
   <option value="3" >option 3</option>
</select>
<button type="button" name="button" onclick="check"></button>


function check() {
  let optionClass1 = document.querySelector('select[name="names1"]').querySelector(':checked').attr('class')
  let optionClass2 = document.querySelector('select[name="names2"]').querySelector(':checked').attr('class')
  if (optionClass1 != optionClass2) {
    alert("e")
  }
}

but it's not workin: "':selected' is not a valid selector"

i dont know jack about jquery, please help

CodePudding user response：

.querySelector() is pure JavaScript and it doesn't have any .attr() chainable Method.
.attr() is a jQuery Method, therefore, instead of getting DOM elements using vanilla JS, use the $() jQuery Object constructor.

Don't use inline JavaScript on* handlers like onclick. Use EventTarget.addEventListener() instead. JS (same as styles) should be in one place only and that's the respective tag or file.

Don't use to store arbitrary data. Use the valid HTML5 data-* attribute instead:

Example using JavaScript (no libraries)

function check() {
  const c1 = document.querySelector('select[name="names1"] option:checked').dataset.class;
  const c2 = document.querySelector('select[name="names2"] option:checked').dataset.class;

  if (c1 !== c2) {
    alert("e")
  }
}

document.querySelector("#check").addEventListener("click", check);

<select name="names1" id="names1">
   <option value="1" data->option 1</option>
   <option value="2" data->option 2</option>
   <option value="3" data->option 3</option>
</select>
<select name="names2" id="names2">
   <option value="1" data->option 1</option>
   <option value="2" data->option 2</option>
   <option value="3" data->option 3</option>
</select>
<button type="button" name="button" id="check">CHECK</button>

or by using jQuery

function check() {
  const c1 = $('select[name="names1"] option:checked').data("class");
  const c2 = $('select[name="names2"] option:checked').data("class");

  if (c1 !== c2) {
    alert("e")
  }
}

$("#check").on("click", check);

<select name="names1" id="names1">
   <option value="1" data->option 1</option>
   <option value="2" data->option 2</option>
   <option value="3" data->option 3</option>
</select>
<select name="names2" id="names2">
   <option value="1" data->option 1</option>
   <option value="2" data->option 2</option>
   <option value="3" data->option 3</option>
</select>
<button type="button" name="button" id="check">CHECK</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>