CODEWITHSUNDEEP
jquery
John Cowan
John Cowan

Reputation: 1674

JQuery How to Quote a Dynamic String

I have two form elements. One is a drop-down list that is dynamically populated via a getJSON call. The other is a standard input text box.

When the form loads, the drop-down list gets populated. The text box will 'usually' have a value in it, as this is an approval form.

What I'm trying to do is have the value in my drop-down list that matches the value in the text box be the selected option. This works for me with other drop-downs of this type, but in this case, I think I have a problem with spaces in my drop-down values and in my text box value.

In the problem I'm having, my text box has a value of "Big Red Barn". (no quotes) One of the values in my drop-down list also has a value of "Big Red Barn". (no quotes) This should be the selected one.

Form:

<select name="cu_vendors" id="cu_vendors">
</select>

<input type="text" name="ven_name" id="ven_name" />

My drop-down list populates just fine.

JQuery:

$.getJSON("get-cu-vendors.html", function(data){
  $('#cu_vendors').html('');
  if(data && data.length > 0){
    $('#cu_vendors').append("<option value='' class='red'>Required</option>");
        $.each(data, function(key, value){
        $("#cu_vendors").append("<option value=\""+$.trim(value)+"\">"+value+"</option>");                  
    });         
  }else{
   $('#cu_vendors').html('');
  }
});
 $("#cu_vendors option[value="+ $('#ven_name').val() +"]").attr('selected', 'selected');

I get a syntax error, but not what it is:

Error: Syntax error, unrecognized expression: #cu_vendors option[value=Big Red Barn]

So, I'm thinking the spaces are the issue here. Is there a way in JQuery to quote these values when I use $('#ven_name').val() in my last line above?

Thanks for any help.

Upvotes: 0

Views: 2116

Answers (3)

beautifulcoder
beautifulcoder

Reputation: 11330

I think you are missing quotes around the selector:

$("#cu_vendors option[value='"+ $('#ven_name').val() +"']").attr('selected', 'selected');

Upvotes: 0

Jason P
Jason P

Reputation: 27012

Two things.. First, the line that sets the selected option needs to be inside the $.getJSON callback or it will execute before the ajax call finishes. Second, Since the value in your selector has spaces, that value needs to be quoted:

$.getJSON("get-cu-vendors.html", function (data) {
    $('#cu_vendors').html('');
    if (data && data.length > 0) {
        $('#cu_vendors').append("<option value='' class='red'>Required</option>");
        $.each(data, function (key, value) {
            $("#cu_vendors").append("<option value=\"" + $.trim(value) + "\">" + value + "</option>");
        });
        $("#cu_vendors option[value='" + $('#ven_name').val() + "']").attr('selected', 'selected');
    } else {
        $('#cu_vendors').html('');
    }    
});

You can see from your error message that your selector looks like this:

#cu_vendors option[value=Big Red Barn]

When it needs to look like this:

#cu_vendors option[value="Big Red Barn"]

Upvotes: 1

Adrien Gorrell
Adrien Gorrell

Reputation: 1319

 $("#cu_vendors option[value='"+ $('#ven_name').val() +"']")

should do the trick.

No problem with spaces !

Notice the use of ' : you want to have "value='thing with spaces'" and not "value=thing with spaces".

Also, as someone has already said now, you can see it from your error message that simple quotes are missing.

Upvotes: 0

Related Questions