Hide button based on value of custom attribute in select option when chnaged-CodePudding

I have a dropdown selector, and a button I need to hide or show depending on the value of a custom attribute in the select options.

HTML

<div id="container-3">
<div id="inside-container">
<select id="pa_size"  name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes">
  <option value="1kg" selected="selected" stock-status="true" >1kg &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- $75.90 &nbsp;- (In Stock)</option>
  <option value="2kg" stock-status="false" >2kg - $119.90 &nbsp;- (No Stock)</option>
  <option value="3kg" stock-status="false" >3kg - $174.90 &nbsp;- (No Stock)</option>
  <option value="5kg" stock-status="false" >5kg - $262.90 &nbsp;- (No Stock)</option>
  <option value="10kg" stock-status="false" >10kg - $482.90 &nbsp;- (No Stock)</option>
  <option value="20kg" stock-status="false" >20kg - $823.90 &nbsp;- (No Stock)</option>
</select>
<button type="submit" >Add to cart</button>
</div>
</div>

The jQuery I came up with, but isn’t working:

$(document).ready(function() { 
  $('#pa_size').change(function(){
    if($("#pa_size").find("option:selected").attr('stock-status') == "false") {
      $("#container-3 .single_add_to_cart_button").hide();
    } else {
      $("#container-3 .single_add_to_cart_button").show();
    }
  });
}); 

/* 
I also tried using the following if statement:
  if($('#pa_size option:selected').attr("stock-status") == "false") {
*/

I set up a jfiddle for it here.

My first question, is how do I make this jQuery work, and have I gone about it a suitable way (aside from whatever the error is)?

I have another related question ...

What’s the best way to also run this before there’s been any user interaction? Such as, the page has loaded, and there’s a default value selected in the dropdown. I’d like the same test to run against it, so that if the stock-status is already false then the button will hide.

CodePudding user response：

As i said in the comment, the reason why your code is not working is:

The “ will make your html look like <div id="“container-3”">

The selector here $("#container-3 .single_add_to_cart_button") will return no elements because #container-3 does not exist. In your case the id of the element looks like “container-3”

Also if you want to make sure the button is hidden/shown depending on the default value then you can add .trigger("change")

Demo

$(document).ready(function() {
  $('#pa_size').change(function() {
    if ($("#pa_size").find("option:selected").attr('stock-status') == "false") {
      $("#container-3 .single_add_to_cart_button").hide();
    } else {
      $("#container-3 .single_add_to_cart_button").show();
    }
  }).trigger("change");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container-3">
  <div id="inside-container">
    <select id="pa_size"  name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes">
      <option value="1kg" stock-status="true" >1kg &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- $75.90 &nbsp;- (In Stock)</option>
      <option value="2kg" stock-status="false" >2kg - $119.90 &nbsp;- (No Stock)</option>
      <option value="3kg" selected="selected" stock-status="false" >3kg - $174.90 &nbsp;- (No Stock)</option>
      <option value="5kg" stock-status="false" >5kg - $262.90 &nbsp;- (No Stock)</option>
      <option value="10kg" stock-status="false" >10kg - $482.90 &nbsp;- (No Stock)</option>
      <option value="20kg" stock-status="false" >20kg - $823.90 &nbsp;- (No Stock)</option>
    </select>
    <button type="submit" >Add to cart</button>
  </div>
</div>

CodePudding user response：

I have seen your code and fiddle. Your code is working as expected in fiddle and I don't see any bug.

Q1. How to run jQuery code?

Ans. => I can see you have not added jQuery CDN using Script tag to run jQuery code. You must have to add below script tag in your HTML page to run jQuery.

jQuery CDN link -> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Q2. What’s the best way to also run this before there’s been any user interaction?

Ans => Below is the example of setting default option to select tag onl oad.

$('#pa_size').val("3kg");

find fiddle here -> https://jsfiddle.net/7410quvf/3/

And to access access values of custom attributes of selected option below line can be useful.

$("#pa_size").find("option:selected").attr('stock-status')

find fiddle here -> https://jsfiddle.net/m29d8aby/1/

Hope this would clear you about your questions.