(jQuery) Trying to write a function on document ready to change placeholder for custom dropdown?

Question

So, in a nutshell, I have this custom dropdown (which doesn't use a select element) for my web application. As you can see in the very brief HTML snippet below, the default value/placeholder for the custom dropdown is "Acura".

<span id="builder-make-selection" class="pick">
  <div class="custom_dd_select builder_makes" tabindex="1">
    <div class="custom_dd_select">
      <span>
        <a>Acura</a>
      </span>

I'm trying to change the default placeholder for the custom dropdown from "Acura" to "Toyota".

All the HTML for the dropdown is being rendered through the JavaScript, so for the changes to be reflected on the HTML, I have to edit the JavaScript.

So, I'm trying to write a function on document ready that will set the default placeholder to "Toyota". Since I'm terrible with jQuery, I'm not able to get this to work. Anybody know what I'm doing wrong?

$(document).ready(function(){
  $(#builder-make-selection .custom_dd_select builder_makes a).text("Toyota");
});

How many sets of `span` in `html`? Where are the closing `div`s? — Mamun, Apr 21 '17 at 06:13
more details on this question are available here http://stackoverflow.com/questions/43490969/js-jquery-changing-default-value-placeholder-of-custom-dropdown — MarisolFigueroa, Apr 21 '17 at 08:16

score 0 · Answer 1 · edited May 23 '17 at 12:34

0

Use this

 $(document).ready(function(){
     $(#builder-make-selection .custom_dd_select.builder_makes a).text("Toyota");
});

Don't give space between custom_dd_select and builder_makes

Refer this

How can I select an element with multiple classes?

edited May 23 '17 at 12:34

Community

1
1

answered Apr 21 '17 at 06:07

Kiran Shinde

5,732
4
24
41

prasanth · Answer 2 · 2017-04-21T06:11:20.823

0

Try with one class name .In a first div you have two class name custom_dd_select builder_makes .If applied with javascript use any one not both

$(document).ready(function() {
  $("#builder-make-selection .custom_dd_select a").text("Toyota");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="builder-make-selection" class="pick">
    <div class="custom_dd_select builder_makes" tabindex="1">
    <div class="custom_dd_select">
    <span>
    <a>Acura</a>
    </span>
    </div>
    </div>
     </span>

edited Apr 21 '17 at 06:11

answered Apr 21 '17 at 06:09

prasanth

22,145
4
29
53

I just tried this and for some reason it's still not working :( – MarisolFigueroa Apr 21 '17 at 08:16
@AliciaGuerra see my snippet snippet its working..What the error get in your `console.log`? and check ` $("#builder-make-selection .custom_dd_select a")` this `"` in your dom ?still not working please update your code snippet in your question. – prasanth Apr 21 '17 at 09:02

score 0 · Answer 3 · answered Apr 21 '17 at 06:10

No need to search based on multiple class. First find the outer element builder-make-selection and then find inner element by respective class builder_makes

<span id="builder-make-selection" class="pick">
    <div class="custom_dd_select builder_makes" tabindex="1">
      <div class="custom_dd_select">
        <span>
          <a>Acura</a>
       </span>
      </div>
    </div>
</span>

$(document).ready(function() {
  $("#builder-make-selection .builder_makes a").text("Toyota");
});

(jQuery) Trying to write a function on document ready to change placeholder for custom dropdown?

3 Answers3