Question

我正在尝试在表单选择中循环选项。它们分为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

你关闭了。您只需从content获取newReportName变量即可。另外，在exists函数中移动keyup：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: