CODEWITHSUNDEEP
javascripthtmljquery
fog
fog

Reputation: 13

':selected' is not a valid selector

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" class="1">option 1</option>
   <option value="2" class="1">option 2</option>
   <option value="3" class="2">option 3</option>
</select>
<select name="names2" id="names2">
   <option value="1" class="1">option 1</option>
   <option value="2" class="1">option 2</option>
   <option value="3" class="2">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

Upvotes: 0

Views: 1609

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

.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 class="" 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-class="1">option 1</option>
   <option value="2" data-class="1">option 2</option>
   <option value="3" data-class="2">option 3</option>
</select>
<select name="names2" id="names2">
   <option value="1" data-class="1">option 1</option>
   <option value="2" data-class="1">option 2</option>
   <option value="3" data-class="2">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-class="1">option 1</option>
   <option value="2" data-class="1">option 2</option>
   <option value="3" data-class="2">option 3</option>
</select>
<select name="names2" id="names2">
   <option value="1" data-class="1">option 1</option>
   <option value="2" data-class="1">option 2</option>
   <option value="3" data-class="2">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>

Upvotes: 2

Related Questions