How can I use the "^=" attribute in a jquery code to show me all values starts with the charakter "f"

Question

Say I'm have the code below and I would like to actived my button when somebody click on a car name, but I don't want to write every car name. I want to use the attribute "^=" that allows me to actived the button when somebody choose the car manufacturer ferrari, fiat or ford. In the CSS they existed the attribute "^=" witch I can use to define the first characters of names - in my example "f" for cars with the first characters. When I write this attribute in my jquery code the code doesn’t work. Have someone an idea who can I define the CSS attribute "^=" in this code below?

I tried to write in the code [value^="f"] but it dosen't work.

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

`$(this).val() == [value^="f"]` <- this is not how you use attribute selectors. You're not using it as a selector at all. `$(selector)` is how you use selectors. Or `$(elementOrSelector).is(attributeSelector)` — Taplar, May 02 '19 at 15:47
Possible duplicate of [jQuery: Finding partial class name](https://stackoverflow.com/questions/33615334/jquery-finding-partial-class-name) — Taplar, May 02 '19 at 15:48
Perhaps you should use an auto complete textbox instead of a dropdown if the user is typing? https://jqueryui.com/autocomplete/ — Pete, May 02 '19 at 15:49
Though you do not even need the attribute selector with what you are trying to do. `this.value[0] === 'f'` would tell you if it starts with a lowercase f — Taplar, May 02 '19 at 15:50

score 1 · Answer 1 · answered May 02 '19 at 16:23

You need use jQuery, because CSS can not get text of option to apply.

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>

random · Accepted Answer · 2019-05-03T12:43:16.973

0

You can use startsWith.

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

<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>
    <option value="bmw">BMW</option>
</select>
<button class="SubmitButton" type="button" >Click Me!</button>

edited May 03 '19 at 12:43

answered May 02 '19 at 16:25

random

7,756
3
19
25

Thank you for your help, but you answer didn't work. I've checked zou code and when you replace for example "fiat" with "bmw" you can click the button, but you should not can click the button. "bmw" starts with the character "b" and not "f" so the button should be disabled, but they isn't disabled. – Student May 03 '19 at 11:58
@Student - See edit. Because earlier the code handled only two condition for `none` and for values beginning with `f`. – random May 03 '19 at 12:44

How can I use the "^=" attribute in a jquery code to show me all values starts with the charakter "f"

2 Answers2