Save HTML <select> element into variable without creating an array

Question

So, the javascript kinda looks like this:

var test = $('#selectelement')
console.log(test)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Now, when running this code, test becomes an array containing the respective element. So if I want to call this select element from the array, I'd have to code

test[0]

Now, this is not much of an issue of course, but I'd like to avoid it since an array is NOT what I need here because only one single element is saved to this variable.

So is there any way to avoid this behavior and instead just have a "normal" variable created (I know JS only knows objects, but at least syntaxwise it should behave like a "normal" variable/primitive value :D)?

as per your error it seems like you are not including JQuery so please make sure to include it other wise error has occurred like $ is not defined. — Rahul Dudharejiya
– Rahul Dudharejiya, Commented Nov 13, 2018 at 7:26

Sari Masri · Accepted Answer · 2018-11-13 07:29:23Z

2

it's an array because you return a jquery object :

 document.getElementById('contents'); //returns a HTML DOM Object
 var contents = $('#contents')//array

you can store it in one line

 var contents = $('#contents')[0];  //returns a jQuery Object

JavaScript objects act similar to associative arrays

answered Nov 13, 2018 at 7:29

Sari Masri

2261 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JSONBUG123 Over a year ago

woah, thanks, nice to know this ;) Just learned a bit more about the inner workings of native JS and Jquery commands! :D

gavgrif · Accepted Answer · 2018-11-13 07:29:52Z

0

Using the code you had returns the jquery object - what you could do is to get the value of the selected element and use that for the variable. The following code simply updates a variable and consoles it when you change the selected option of the select list.

$('#selectelement').on('change',function(){
  var test = $(this).val();
  console.log(test)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectelement">Change me </label>
<select id="selectelement">
  <option selected disabled></option>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
 </select>

answered Nov 13, 2018 at 7:29

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Comments

Ahs N · Accepted Answer · 2018-11-13 07:33:10Z

0

You can always use

var test = ('#selectelement')[0];

or a more JQuery way,

var test = ('#selectelement').get(0);

to get the first element into the variable directly. You can of course also use native functions like this:

var test = document.querySelector("#selectelement");

which will still give you the only element.

answered Nov 13, 2018 at 7:33

Ahs N

8,3961 gold badge30 silver badges34 bronze badges

Collectives™ on Stack Overflow

Save HTML <select> element into variable without creating an array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related