How can I change my java scrip to work if the selected has multiple words, for example bellow the value has two words "Online Events" the div class is two words "Online Events" however it will remain hidden as the current Jquery will only look for the value if matches the class as one word.

let $j = jQuery.noConflict();

$j(document).ready(function($j) {
  $j("#event-drop").change(function() {
    let opt = $j(this).val();
    if (opt === "all") {
      $j(".event_div").show();
    } else {
      $j(".event_div").hide();
      $j("."   opt).show();
    }
  })
});

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

<select id="event-drop" style="margin-bottom:20px">
  <option value="all">All</option>
  <option value="Online Events">online</option>
  <option value="Ofline Events">online</option>
</select>

<div  style="">
  <div >
    <small  style="color: #8D8CAB">here titlke</small>
    <div >
      <h5 >Sub title</h5>
    </div>
    <div >
      <small >
                                            small text                                            </small>
      <small >
                                                January 4, 2022                                            </small>
    </div>
    <div >
      <a  href="http://www.google.com" target="_blank">
                                                    More info                                                </a>
    </div>
  </div>
</div>

CodePudding user response：

JS reads the value correctly but what you end up showing is this:

.Online Events

That means you are showing an Events element inside a container having the Online class. Something like this:

<div >
  <Event>...</Event>
</div>

The problem is the space inbetween the value. Replace the space with a dash and change the class accordingly and it should work fine.

$('#select').change((e) => {

  const value = e.target.value;
  
  if(value == 'all'){
    $('ul > li').show();
    return;
  }
  
  $('ul > li').hide();
  $('.'   value).show();
  
})

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

<select id="select">
  <option value="all">All</option>
  <option value="online">Only Online</option>
  <option value="offline">Only Offline</option>
</select>

<ul>

  <li >Cool Online Event</li>
  <li >Cool Offline Event</li>
  <li >Cool Online Event</li>

</ul>

CodePudding user response：

Within select > option values there is a space ' ' which results in not to match the class names.

Because each value provided with space inside class attribute will be taken as separate class. So Online and Events are considered as separate classes.

Also $j('.Online Events') will try to find Events Element inside Online Class. That results in failed operation.

To overcome this issue:

1. Having space in select > option value, keep class attribute value with some separator like _ (underscore). Also perform, replace ' ' (space) with '_' (underscore) in selected option value inside javascript to find exact match.
2. Either change values of select > option without space and use same value in class attribute.

let $j = jQuery.noConflict();

$j(document).ready(function($j) {
  $j("#event-drop").change(function() {
    let opt = $j(this).val();
    if (opt === "all") {
      $j(".event_div").show();
    } else {
      opt = opt.replace(" ", "_");  // Replace space with underscore to match class
      $j(".event_div").hide();
      $j("."   opt).show();
    }
  })
});

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

<select id="event-drop" style="margin-bottom:20px">
  <option value="all">All</option>
  <option value="Online Events">online</option>
  <option value="Ofline Events">ofline</option>
</select>
<!-- Using `Online_Events` in `class` attribute value instead of `Online Events`. -->
<div  style="">
  <div >
    <small  style="color: #8D8CAB">here titlke</small>
    <div >
      <h5 >Sub title</h5>
    </div>
    <div >
      <small >
                                            small text                                            </small>
      <small >
                                                January 4, 2022                                            </small>
    </div>
    <div >
      <a  href="http://www.google.com" target="_blank">
                                                    More info                                                </a>
    </div>
  </div>
</div>