jQuery

Question

我正在尝试以 select 的形式遍历选项。它们被分成 optgroups，我认为这是我遇到问题的地方，我只是找不到正确的语法。

目标是将输入的 .val() 与列表中的 .text() 选项进行比较。如果匹配，将文本变为红色，否则将其变为绿色。

如果我在此处输入无效 ID 而不是 sreportname：$("#sreportname option") 那么文本总是变为绿色。输入 sreportname 后，什么也没有发生。我很茫然。

这是我的表格：

<form>
    <select name="sreportname" id="sreportname" class="form-control">
        <option value="zrxqy">--Choose a Report--</option>
        <option value="newReport">--Create a New Report--</option>
        <optgroup label="General Reports">
            <option>Abandoned Mines</option>
        </optgroup>
        <optgroup label="TPS Reports">
            <option>Farm</option>
            <option>Store</option>
            <option>Chicken Coops</option>
        </optgroup>
    </select>
    <input type="text" id="newReportName" name="newReportName">
</form>

这里是 jQuery:

$(document).ready(function () {
    var exists = false;
    $("#newReportName").keyup(function () {
        $("#sreportname option").each(function () {
            if ($(this).text() == content) {
                exists = true;
                return false;
            }
        });
        if(exists) {
            $(this).css("color", "red");
        } else {
            $(this).css("color", "green");
        }
    });
});

我创建了一个 fiddle。有什么想法吗？

Answer 1

你很接近。您只需从 newReportName 获取 content 变量。此外，将 exists 移动到 keyup 函数中：

$("#newReportName").keyup(function () {
  var exists = false;
  var content= $(this).val();
  $("#sreportname option").each(function () {
    if ($(this).text() == content) {
      exists = true;
      return false;
    }
  });
  if(exists) {
    $(this).css("color", "red");
  } else {
    $(this).css("color", "green");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select name="sreportname" id="sreportname" class="form-control">
        <option value="zrxqy">--Choose a Report--</option>
        <option value="newReport">--Create a New Report--</option>
        <optgroup label="General Reports">
            <option>Abandoned Mines</option>
        </optgroup>
        <optgroup label="TPS Reports">
            <option>Farm</option>
            <option>Store</option>
            <option>Chicken Coops</option>
        </optgroup>
    </select>
    <input type="text" id="newReportName" name="newReportName">
</form>

jQuery - 将输入与现有 select optgroup 选项进行比较

jQuery - Compare input to existing select optgroup options

html

css

jquery-mobile

twitter-bootstrap