javascript - 如何在 jquery 代码中使用 "^="属性来显示所有以字符 "f"开头的值

Question

假设我有下面的代码，我想在有人单击汽车名称时激活我的按钮，但我不想写下每个汽车名称。我想使用属性“^=”，当有人选择汽车制造商法拉利、菲亚特或福特时，我可以激活该按钮。在 CSS 中，它们存在属性“^=”，我可以用它来定义名称的第一个字符 - 在我的示例中，“f”代表带有第一个字符的汽车。当我在 jquery 代码中编写此属性时，代码不起作用。有人知道我可以在下面的代码中定义 CSS 属性“^=”吗？

我尝试在代码中写入[value^="f"]，但它不起作用。

html

<select class="cars">
      <option value="none" selected></option>
      <option value="ferrari">Ferrari</option>
      <option value="fiat">Fiat</option>
      <option value="ford">Ford</option>
    </select>
  <button class="SubmitButton" type="button" >Click Me!</button>

CSS

.SubmitButton {width:150px;}
.ButtonColor1 {color:red;}
:disabled {
  border:3px solid lightgray;
  color:gray;
}
button {
  border:3px solid green;
  color:black;
}
button:hover:disabled {
  cursor:not-allowed;
}
button:hover {
  cursor:pointer;
}

jquery

$(document).ready(function() {
    if($("select.cars").val() == "none"){
        $(".SubmitButton").attr("disabled", "disabled");
      }
    $("select.cars").change(function(){
      if($(this).val() == [value^="f"]){
         $(".SubmitButton").removeAttr("disabled");
         $(".SubmitButton").addClass("ButtonColor1");  
      }
      else if($("select.cars").val() == "none"){
        $(".SubmitButton").attr("disabled", "disabled");
      }
    });
});

Answer 1

您需要使用 jQuery，因为 CSS 无法获取要应用的选项文本。

if($("select.cars :selected").text().indexOf("F") === 0){
           $(".SubmitButton").removeAttr("disabled");
           $(".SubmitButton").addClass("ButtonColor1");  

 }

$(document).ready(function() {
    if($("select.cars").val() == "none"){
        $(".SubmitButton").attr("disabled", "disabled");
      }
    $("select.cars").change(function(){
    
         if($("select.cars :selected").text().indexOf("F") === 0){
           $(".SubmitButton").removeAttr("disabled");
           $(".SubmitButton").addClass("ButtonColor1");  
         
      }
      else if($("select.cars").val() == "none"){
        $(".SubmitButton").attr("disabled", "disabled");
      }
    });
});

.SubmitButton {width:150px;}
.ButtonColor1 {color:red;}
:disabled {
  border:3px solid lightgray;
  color:gray;
}
button {
  border:3px solid green;
  color:black;
}
button:hover:disabled {
  cursor:not-allowed;
}
button:hover {
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="cars">
      <option value="none" selected></option>
      <option value="ferrari">Ferrari</option>
      <option value="fiat">Fiat</option>
      <option value="ford">Ford</option>
    </select>
  <button class="SubmitButton" type="button" >Click Me!</button>