CODEWITHSUNDEEP
javascriptjquery
pobliska
pobliska

Reputation: 247

Display div when selected option contains specific text

If user choose any option from list which contains C-D (in value or label it doesn't matter in this case) I would like to show next option list. I tried with contains() Selector but somewhere there is a mistake.

My HTML structure:

<script>
$(function () {
  $("#choose-material").change(function() {
    var val = $(this).val();
    if(val:contains('C-D')) {
        $("#choose-size").show();
    }
  });
});
</script>
#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="material-type" id="choose-material">
	<option value="C-D">C-D</option>
	<option value="VV_C-D">VV_C-D</option>
	<option value="VV_C-B">VV_C-B</option>
	<option value="B_C-D">B_C-D</option>
	<option value="GL_WW">GL_WW</option>
</select>

<select name="material-size" id="choose-size">
	<option value="Small">Small</option>
	<option value="Medium">Medium</option>
	<option value="Big">Big</option>
</select>

Upvotes: 1

Views: 73

Answers (6)

Yosvel Quintero
Yosvel Quintero

Reputation: 19090

You can use String.prototype.includes()

Note that for more browser compatibility you can use String.prototype.indexOf() like this $(this).val().indexOf('C-D') !== -1

Code:

$('#choose-material').change(function() {
  if ($(this).val().includes('C-D')) {
      $("#choose-size").show();
  }
});
#choose-size {display: none;)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="material-type" id="choose-material">
	<option value="C-D">C-D</option>
	<option value="VV_C-D">VV_C-D</option>
	<option value="VV_C-B">VV_C-B</option>
	<option value="B_C-D">B_C-D</option>
	<option value="GL_WW">GL_WW</option>
</select>

<select name="material-size" id="choose-size">
	<option value="Small">Small</option>
	<option value="Medium">Medium</option>
	<option value="Big">Big</option>
</select>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30729

You have several issues with your code:

  1. You are missing the $("#choose-size").hide(); when the value do not contain C-D
  2. You need to use indexOf() or includes() to check if the value contains C-D. Preference is to use indexOf() as includes() do not work in IE browser.

$(function () {
  $("#choose-material").change(function() {
    var val = $(this).val();
    if(val.indexOf('C-D') !== -1) {
        $("#choose-size").show();
    } else {
       $("#choose-size").hide();
    }
  });
});
#choose-size {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="material-type" id="choose-material">
	<option value="C-D">C-D</option>
	<option value="VV_C-D">VV_C-D</option>
	<option value="VV_C-B">VV_C-B</option>
	<option value="B_C-D">B_C-D</option>
	<option value="GL_WW">GL_WW</option>
</select>

<select name="material-size" id="choose-size">
	<option value="Small">Small</option>
	<option value="Medium">Medium</option>
	<option value="Big">Big</option>
</select>

Upvotes: 0

dekts
dekts

Reputation: 830

.contains() and .includes() are both experimental, re: non-standard. I would not recommend their use in production systems. I'd stick with .indexOf() for now.

It's easy with the indexOf method, you can see a tutorial of indexOf and substring here: http://www.dreamsyssoft.com/javascript-shell-scripting/strings-tutorial.php

#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
  $("#choose-material").change(function() {
    var val = $(this).val();
    if(val.indexOf('C-D') !== -1) {
        $("#choose-size").show();
    } else {
        $("#choose-size").hide();
    }
  });
});
</script>

<select name="material-type" id="choose-material">
	<option value="C-D">C-D</option>
	<option value="VV_C-D">VV_C-D</option>
	<option value="VV_C-B">VV_C-B</option>
	<option value="B_C-D">B_C-D</option>
	<option value="GL_WW">GL_WW</option>
</select>

<select name="material-size" id="choose-size">
	<option value="Small">Small</option>
	<option value="Medium">Medium</option>
	<option value="Big">Big</option>
</select>

Upvotes: 0

Protozoid
Protozoid

Reputation: 1207

You can check if the selected value contains the C-D substring via a regex of shape /C-D/g, as such: 

$(function () {
  $("#choose-material").change(function() {
    var val = $(this).val();
    if(val.match(/C\-D/g)) {
        $("#choose-size").show();
    }
  });
});
#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="material-type" id="choose-material">
	<option value="C-D">C-D</option>
	<option value="VV_C-D">VV_C-D</option>
	<option value="VV_C-B">VV_C-B</option>
	<option value="B_C-D">B_C-D</option>
	<option value="GL_WW">GL_WW</option>
</select>

<select name="material-size" id="choose-size">
	<option value="Small">Small</option>
	<option value="Medium">Medium</option>
	<option value="Big">Big</option>
</select>

Upvotes: 0

Shweta Ranpise
Shweta Ranpise

Reputation: 102

Try below code:

$(function () {
 $("#choose-material").change(function() {
 var val = $(this).val();
 if(val.indexOf("C-D")>=0) {
    $("#choose-size").show();
  }
 });
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

The :contains() selector is intended for use in jQuery objects. To check if the val string contains C-D you can instead use indexOf().

Also note that you can simplify the logic by using toggle() and providing a boolean result as an argument which will in turn show or hide the given element. Finally, note that your CSS had a trailing ) instead of }.

With all that said, try this:

$(function() {
  $("#choose-material").change(function() {
    $("#choose-size").toggle($(this).val().indexOf('C-D') != -1);
  }).change();
});
#choose-size {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="material-type" id="choose-material">
  <option value="C-D">C-D</option>
  <option value="VV_C-D">VV_C-D</option>
  <option value="VV_C-B">VV_C-B</option>
  <option value="B_C-D">B_C-D</option>
  <option value="GL_WW">GL_WW</option>
</select>

<select name="material-size" id="choose-size">
  <option value="Small">Small</option>
  <option value="Medium">Medium</option>
  <option value="Big">Big</option>
</select>

Upvotes: 1

Related Questions