Trouble setting value of select input from success function of getJSON

Question

I have an html page with a select input that is being used to filter a getJSON request in a function. In the success function of the request, I am dynamically creating an html table from the JSON and appending the table to a div in the html document. All is working fine, but the select input resets back to the default upon calling the function.

I am trying to set the select input back to the selected value so the end user know what data they are looking at. I have the class name of the select input stored in a parameter called p1Name and the selected value stored in a parameter called p1.

Normally I would use something like this: $('.ddlUserID').Val(p1); where the class name is hard coded in. But I need this function to be dynamic and need to use the parameter of p1Name for the class name. So I have tried:

var DDL1 = "'." + p1Name + "'";
$(DDL1).val(p1);

This returns the following error, Uncaught Error: Syntax error, unrecognized expression: '.ddlUserID'. I have also tried the javascript syntax of document.getElementsByClassName(DDL1).value = p1; which returns the same error.

If I change the parameter of DDL1 to the hard coded value of '.ddlUserID' the form works as expected.

What is the proper way to set the selected value of a select input when using a parameter as the id or class name?

score 1 · Accepted Answer · answered Aug 20 '19 at 19:06

1

You don't need to add extra quotation marks to your selector string.

var DDL1 = "." + p1Name;
$(DDL1).val(p1);

This should work

answered Aug 20 '19 at 19:06

Japsz

785
6
14

Yet are not the extra quotation marks required when hard coding an Id or Class name? – skrantz Aug 20 '19 at 19:15
When you are 'hard coding' as you say, you pass a string variable which is represented as a concatenation of characters between single or double quotes (`'` or `"`). In your case, you where using both, so inside your string (which was delimeted by double quotes) there was the `'` character on both ends causing the selector to not be recognized. – Japsz Aug 20 '19 at 19:26
1

The quotation marks are only necessary to indicate that something is a string, rather than being javascript code. Presumably `p1Name` is already a string, and so all you need to do is add a `.` to the front of it. Addition `+` on strings combines them into a single string, ergo `"." + p1Name` creates the string with a value of `.ddlUserID` – David Sampson Aug 20 '19 at 19:28

score 0 · Answer 2 · answered Aug 20 '19 at 19:06

0

Leave out the extra quotes in var DDL1 = "'." + p1Name + "'";

Should be var DDL1 = '.' + p1Name;

answered Aug 20 '19 at 19:06

David Sampson

727
3
15

score 0 · Answer 3 · answered Aug 20 '19 at 19:09

It should work, you can use strings in the selector. I think you don't need the single quotes

var p1Name = 'ddlUserID'
var selector1 = `.${p1Name}`

var selector2 = '.' + p1Name

console.log('selector1:', $(selector1))
console.log('selector2:', $(selector2))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ddlUserID">ddlUserID</div>

Allan_Slade · Answer 4 · 2019-08-20T19:30:17.350

You can use .val() in JQuery to set the value of select inputs.

What is the proper way to set the selected value of a select input when using a parameter as the id or class name?

See this: https://stackoverflow.com/a/5891929/11860085.

$(document).ready(function(){

  var p1 = "foo";
  var p2 = "bar";
  
  var p1name = "some_id";
  var p2name = "some_class";

  $( "#setValues" ).click(function() {
    $('#' + p1name).val(p1);
    $('.' + p2name).val(p2);
  });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="setValues">Set values</button>

<select id="some_id">
  <option value="" disabled selected>Select something...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="foo">foo</option>
</select>

<select class="some_class">
  <option value="" disabled selected>Select something...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="bar">bar</option>
</select>

Trouble setting value of select input from success function of getJSON

4 Answers4