javascript - Jquery search for a value inside a div - Stack Overflow

admin管理员组

文章数量:1026373

I have the following div,

<div class="clinic_visit_list_entry animated fadeInUp">
    <div>Hepatitis B</div>
    <div>Screened: Yes</div>
    <div>Treated: Yes</div>
    <div>Referred: Yes British American Tobacco Kenya Clinic</div>
</div>
<div class="clinic_visit_list_entry animated fadeInUp">
    <div>Hepatitis B</div>
    <div>Screened: Yes</div>
    <div>Treated: Yes</div>
    <div>Referred: Yes British American Tobacco Kenya Clinic</div>
</div>

When I select a value from the following html select tag ,

<label>Select Service</label>
<select class="select_with_label" name="Service" id="select_service">
    <option selected="selected">Please select</option>  <option value="TB">TB</option>
    <option value="Hepatitis B">Hepatitis B</option>
    <option value="Hepatitis C">Hepatitis C</option>
    <option value="Overdose management">Overdose Management</option>
    <option value="Abscess">Abscess</option>
    <option value="Alcohol & drug abuse">Alcohol & drug abuse</option>
    <option value=" Cervical cancer" >Cervical cancer</option>
</select>

It should trigger the following jquery :

$("#select_service").change(function () {
     var value = $( "#select_service" ).val();
     //Search through the Div for the selected value 
});

Which should search through the clinic visit entry list if the selected value exists in the div. How can I implement the search through the div? (It should only search for the values which are already in the select option values)

I have the following div,

<div class="clinic_visit_list_entry animated fadeInUp">
    <div>Hepatitis B</div>
    <div>Screened: Yes</div>
    <div>Treated: Yes</div>
    <div>Referred: Yes British American Tobacco Kenya Clinic</div>
</div>
<div class="clinic_visit_list_entry animated fadeInUp">
    <div>Hepatitis B</div>
    <div>Screened: Yes</div>
    <div>Treated: Yes</div>
    <div>Referred: Yes British American Tobacco Kenya Clinic</div>
</div>

When I select a value from the following html select tag ,

<label>Select Service</label>
<select class="select_with_label" name="Service" id="select_service">
    <option selected="selected">Please select</option>  <option value="TB">TB</option>
    <option value="Hepatitis B">Hepatitis B</option>
    <option value="Hepatitis C">Hepatitis C</option>
    <option value="Overdose management">Overdose Management</option>
    <option value="Abscess">Abscess</option>
    <option value="Alcohol & drug abuse">Alcohol & drug abuse</option>
    <option value=" Cervical cancer" >Cervical cancer</option>
</select>

It should trigger the following jquery :

$("#select_service").change(function () {
     var value = $( "#select_service" ).val();
     //Search through the Div for the selected value 
});

Which should search through the clinic visit entry list if the selected value exists in the div. How can I implement the search through the div? (It should only search for the values which are already in the select option values)

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 28, 2015 at 16:48 Artur Filipiak 9,15744 gold badges3232 silver badges5656 bronze badges asked Sep 28, 2015 at 16:31 H DindiH Dindi 1,55288 gold badges3939 silver badges7171 bronze badges 2

• Search thru and then do what? – lshettyl Commented Sep 28, 2015 at 16:36
• @lshettyl then it alerts if the value already exists in the Div , example if it finds Ascess in the div , it should alert you that it already exists in the div. – H Dindi Commented Sep 28, 2015 at 16:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can use :contains selector

Description: Select all elements that contain the specified text.

$("#select_service").change(function () {
    var value = $(this).val();
    var div = $('.clinic_visit_list_entry div:contains("'+value+'")');
});

JSFiddle demo

Demo with an alert (OP ment to the question)

You could loop through all the divs and check if their content matches the selected value.

$("#select_service").change(function() {
    var value = $(this).val();
    $(".clinic_visit_list_entry div").each(function() {

        if ($(this).text().match(value)) {
            //Text found in div 
        }
    });
});

I would remend searching through the data that produced the HTML markup for the div, but if you must search the DOM you could use jQuery's find method. A plete, working example is below.

$("#select_service").change(function () {
  var value = $( "#select_service" ).val();
  
  //Search through the Div for the selected value
  var isFound = !!$('div.clinic_visit_list_entry').find('*:contains(' + value + ')').length;
  var output = document.createElement('div');
  
  output.innerHTML = 'Value ' + value + ' found: ' + isFound;
  document.body.appendChild(output);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clinic_visit_list_entry animated fadeInUp"><div>Hepatitis B</div><div>Screened: Yes</div><div>Treated: Yes</div><div>Referred: Yes British American Tobacco Kenya Clinic</div></div><div class="clinic_visit_list_entry animated fadeInUp"><div>Hepatitis B</div><div>Screened: Yes</div><div>Treated: Yes</div><div>Referred: Yes British American Tobacco Kenya Clinic</div></div>

<br />

<label>Select Service</label>
<select class="select_with_label" name="Service" id="select_service">
  <option selected="selected">Please select</option>  <option value="TB">TB</option>
  <option value="Hepatitis B">Hepatitis B</option>
  <option value="Hepatitis C">Hepatitis C</option>
  <option value="Overdose management">Overdose Management</option>
  <option value="Abscess">Abscess</option>
  <option value="Alcohol & drug abuse">Alcohol & drug abuse</option>
  <option value=" Cervical cancer" >Cervical cancer</option>
</select>

<hr />

I have the following div,

<div class="clinic_visit_list_entry animated fadeInUp">
    <div>Hepatitis B</div>
    <div>Screened: Yes</div>
    <div>Treated: Yes</div>
    <div>Referred: Yes British American Tobacco Kenya Clinic</div>
</div>
<div class="clinic_visit_list_entry animated fadeInUp">
    <div>Hepatitis B</div>
    <div>Screened: Yes</div>
    <div>Treated: Yes</div>
    <div>Referred: Yes British American Tobacco Kenya Clinic</div>
</div>

When I select a value from the following html select tag ,

<label>Select Service</label>
<select class="select_with_label" name="Service" id="select_service">
    <option selected="selected">Please select</option>  <option value="TB">TB</option>
    <option value="Hepatitis B">Hepatitis B</option>
    <option value="Hepatitis C">Hepatitis C</option>
    <option value="Overdose management">Overdose Management</option>
    <option value="Abscess">Abscess</option>
    <option value="Alcohol & drug abuse">Alcohol & drug abuse</option>
    <option value=" Cervical cancer" >Cervical cancer</option>
</select>

It should trigger the following jquery :

$("#select_service").change(function () {
     var value = $( "#select_service" ).val();
     //Search through the Div for the selected value 
});

Which should search through the clinic visit entry list if the selected value exists in the div. How can I implement the search through the div? (It should only search for the values which are already in the select option values)

I have the following div,

<div class="clinic_visit_list_entry animated fadeInUp">
    <div>Hepatitis B</div>
    <div>Screened: Yes</div>
    <div>Treated: Yes</div>
    <div>Referred: Yes British American Tobacco Kenya Clinic</div>
</div>
<div class="clinic_visit_list_entry animated fadeInUp">
    <div>Hepatitis B</div>
    <div>Screened: Yes</div>
    <div>Treated: Yes</div>
    <div>Referred: Yes British American Tobacco Kenya Clinic</div>
</div>

When I select a value from the following html select tag ,

<label>Select Service</label>
<select class="select_with_label" name="Service" id="select_service">
    <option selected="selected">Please select</option>  <option value="TB">TB</option>
    <option value="Hepatitis B">Hepatitis B</option>
    <option value="Hepatitis C">Hepatitis C</option>
    <option value="Overdose management">Overdose Management</option>
    <option value="Abscess">Abscess</option>
    <option value="Alcohol & drug abuse">Alcohol & drug abuse</option>
    <option value=" Cervical cancer" >Cervical cancer</option>
</select>

It should trigger the following jquery :

$("#select_service").change(function () {
     var value = $( "#select_service" ).val();
     //Search through the Div for the selected value 
});

Which should search through the clinic visit entry list if the selected value exists in the div. How can I implement the search through the div? (It should only search for the values which are already in the select option values)

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 28, 2015 at 16:48 Artur Filipiak 9,15744 gold badges3232 silver badges5656 bronze badges asked Sep 28, 2015 at 16:31 H DindiH Dindi 1,55288 gold badges3939 silver badges7171 bronze badges 2

• Search thru and then do what? – lshettyl Commented Sep 28, 2015 at 16:36
• @lshettyl then it alerts if the value already exists in the Div , example if it finds Ascess in the div , it should alert you that it already exists in the div. – H Dindi Commented Sep 28, 2015 at 16:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can use :contains selector

Description: Select all elements that contain the specified text.

$("#select_service").change(function () {
    var value = $(this).val();
    var div = $('.clinic_visit_list_entry div:contains("'+value+'")');
});

JSFiddle demo

Demo with an alert (OP ment to the question)

You could loop through all the divs and check if their content matches the selected value.

$("#select_service").change(function() {
    var value = $(this).val();
    $(".clinic_visit_list_entry div").each(function() {

        if ($(this).text().match(value)) {
            //Text found in div 
        }
    });
});

I would remend searching through the data that produced the HTML markup for the div, but if you must search the DOM you could use jQuery's find method. A plete, working example is below.

$("#select_service").change(function () {
  var value = $( "#select_service" ).val();
  
  //Search through the Div for the selected value
  var isFound = !!$('div.clinic_visit_list_entry').find('*:contains(' + value + ')').length;
  var output = document.createElement('div');
  
  output.innerHTML = 'Value ' + value + ' found: ' + isFound;
  document.body.appendChild(output);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clinic_visit_list_entry animated fadeInUp"><div>Hepatitis B</div><div>Screened: Yes</div><div>Treated: Yes</div><div>Referred: Yes British American Tobacco Kenya Clinic</div></div><div class="clinic_visit_list_entry animated fadeInUp"><div>Hepatitis B</div><div>Screened: Yes</div><div>Treated: Yes</div><div>Referred: Yes British American Tobacco Kenya Clinic</div></div>

<br />

<label>Select Service</label>
<select class="select_with_label" name="Service" id="select_service">
  <option selected="selected">Please select</option>  <option value="TB">TB</option>
  <option value="Hepatitis B">Hepatitis B</option>
  <option value="Hepatitis C">Hepatitis C</option>
  <option value="Overdose management">Overdose Management</option>
  <option value="Abscess">Abscess</option>
  <option value="Alcohol & drug abuse">Alcohol & drug abuse</option>
  <option value=" Cervical cancer" >Cervical cancer</option>
</select>

<hr />

本文标签： javascriptJquery search for a value inside a divStack Overflow