How to search for a string

Question

I am trying to show a div based on a drop down selection. With some drop downs, I have multiple "values" and this is where I have the problem. How can I have the javascript only see the string in the "VALUE" until the comma.

This code works if I change

value = 'ABCD,asdf;

to

value = 'ABCD'

<script>
$(document).ready(function(){
$('#test').on('change', function() {

  if ( this.value == 'ABCD')
  {
    $("#rrrr").show();
  }
  else
  {
    $("#rrrr").hide();
  }


   });
 })
 </script>

    <select id='test' name = 'test'>
    <option value = '123'>hide div</option>
    <option value = 'ABCD,asdf'>display div</option>
      </select>
      <input type='submit' name = 'submit' value='Apply'>

     <div style='display:none;' id='rrrr'>

     display this section
           </div>

Ho can I use value = 'ABCD,asdf' so that I can show the div when teh value contains the string until the comma? I need to have 2 strings in the value

You can use the [includes() method](https://www.w3schools.com/jsref/jsref_includes.asp) — APAD1, Sep 05 '19 at 16:19
Possible duplicate of [this question](https://stackoverflow.com/questions/3245967/can-an-option-in-a-select-tag-carry-multiple-values) — Teddy Michels, Sep 05 '19 at 16:21

Danny Fardy Jhonston Bermúdez · Answer 1 · 2019-09-05T16:26:17.550

You could use String.prototype.indexOf(), in this way: this.value.indexOf('ABCD') > -1.

The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.

Something like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#test').on('change', function() {

      if (this.value.indexOf('ABCD') > -1) {
        $("#rrrr").show();
      } else {
        $("#rrrr").hide();
      }


    });
  })
</script>

<select id='test' name='test'>
  <option value='123'>hide div</option>
  <option value='ABCD,asdf'>display div</option>
</select>
<input type='submit' name='submit' value='Apply'>

<div style='display:none;' id='rrrr'>

  display this section
</div>

score 2 · Answer 2 · answered Sep 05 '19 at 16:20

2

Using slice() and indexOf() will help you out here. slice(a, b) will return a section of the string from a to b and indexOf() will return the place in the string where the character is first found which is what we'll use for the second value in slice.

$(document).ready(function(){
$('#test').on('change', function() {
  if ( this.value.slice(0, this.value.indexOf(",")) === 'ABCD')
  {
    $("#rrrr").show();
  }
  else
  {
    $("#rrrr").hide();
  }


   });
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='test' name = 'test'>
    <option value = '123'>hide div</option>
    <option value = 'ABCD,asdf'>display div</option>
      </select>
      <input type='submit' name = 'submit' value='Apply'>

     <div style='display:none;' id='rrrr'>

     display this section
           </div>

answered Sep 05 '19 at 16:20

Jbluehdorn

475
2
11

Thanks everyone, all your suggestions worked. @afrotonder - I need 2 values becuase I am working on a hardware project where I need to display the DIV based on the hardware's chipset and when I submit the form, I need to get the device's MAC address. There is no way to get the unique MAC from just the chipset which is why I need 2 values – Gino Sep 05 '19 at 17:22
I am not sure how to select all your suggestions as the good one since they all worked – Gino Sep 05 '19 at 17:23
@Gino Stack only allows for one accepted answer so it can sort it to the top for people who come across the post later while looking for the same issue. – Jbluehdorn Sep 05 '19 at 17:24

score 1 · Accepted Answer · answered Sep 05 '19 at 16:22

You can accomplish this by using the includes() method.

$(document).ready(function(){
  $('#test').on('change', function() {
    if (this.value.includes('ABCD')) {
      $("#rrrr").show();
    } else {
      $("#rrrr").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='test' name = 'test'>
  <option value = '123'>hide div</option>
  <option value = 'ABCD,asdf'>display div</option>
</select>
<input type='submit' name = 'submit' value='Apply'>
<div style='display:none;' id='rrrr'>display this section</div>

score 1 · Answer 4 · answered Sep 05 '19 at 16:26

It seems weird what you want to do, as I have no clue why you would need two values in one. Anyways, I believe what youre looking for has been answered here:

https://stackoverflow.com/a/3245995/11296950

The solution shown is storing an object as a value and setting the object value to an array with your values.

Hope it helps!

How to search for a string

4 Answers4