Question

我有以下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>

当我从以下html选择标记中选择一个值时，

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

它应该触发以下jquery：

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

如果div中存在所选值，则应在诊所访问条目列表中进行搜索。如何通过div实现搜索？（它应该只搜索已经在选择选项值中的值）

Answer 1

您可以使用:contains选择器

说明：选择包含指定文字的所有元素。

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

JSFiddle demo

Demo with an alert（OP评论问题）

Answer 2

您可以循环遍历所有div并检查其内容是否与所选值匹配。

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

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

Answer 3

我建议您搜索为div生成HTML标记的数据，但如果您必须搜索DOM，则可以使用jQuery's find method。下面是一个完整的工作示例。

＆＃13;

$("#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);
});

＆＃13;

<script src="https://ajax.googleapis.com/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 />

＆＃13;

Jquery在div中搜索一个值

3 个答案: