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

APAD1
– APAD1

2019-09-05 16:19:45 +00:00
Commented Sep 5, 2019 at 16:19 — APAD1
– APAD1, Commented Sep 5, 2019 at 16:19
Possible duplicate of this question

Teddy Michels
– Teddy Michels

2019-09-05 16:21:40 +00:00
Commented Sep 5, 2019 at 16:21 — Teddy Michels
– Teddy Michels, Commented Sep 5, 2019 at 16:21

Jbluehdorn · Accepted Answer · 2019-09-05 16:20:56Z

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 5, 2019 at 16:20

Jbluehdorn

4752 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gino Over a year ago

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 Over a year ago

I am not sure how to select all your suggestions as the good one since they all worked

Jbluehdorn Over a year ago

@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.

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2019-09-05 16:26:17Z

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>

APAD1 · Accepted Answer · 2019-09-05 16:22:02Z

1

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>

answered Sep 5, 2019 at 16:22

APAD1

13.7k8 gold badges47 silver badges72 bronze badges

Comments

afrotonder · Accepted Answer · 2019-09-05 16:26:16Z

1

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!

answered Sep 5, 2019 at 16:26

afrotonder

213 bronze badges

Collectives™ on Stack Overflow

How to search for a string

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related