How to get array object from html element

Question

I have a select box how to get all text and value in a array.

<select  data-original-title="" title="">
    <option value=""> -- Select Template -- </option>
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>

all the value in a object array

how to get radio button label and value in a array

<div class="radio">
    <label class="radio-inline">
        <input tabindex="7" onclick="hidetyping_translt()" 
            name="txtSelectedLanguage" id="txtSelectedLanguage1" value="English" 
            checked="checked" type="radio"> English </label>
    <label class="radio-inline">
        <input tabindex="8" onclick="showtyping_translt()" 
            name="txtSelectedLanguage" id="txtSelectedLanguage2" value="Other" 
            type="radio">Other Language</label>
    <label class="radio-inline">
        <input tabindex="9" onclick="hidetyping_translt()" 
            name="txtSelectedLanguage" id="txtSelectedLanguage3" value="Flash" 
            type="radio">Flash SMS</label>
</div>

Answer 1

Radio Select and Select Option is sort of "one selected at a time" but in any case, you are able to multi-select on the radio or select option, then just do this to the name attribute

name="txtSelectedLanguage[]"

multiarray would be

name="txtSelectedLanguage[][]"

Answer 2

The option I prefer to get data from html elements is the following:

(function myFunc() {
        document.addEventListener("DOMContentLoaded", function() {
           let selectContainer = document.querySelector(".select")
           let allOptions = selectContainer.querySelectorAll("option")
           allOptions.forEach(option => {
             console.log(option.value)
           })
        })
      }())

Please notice above how I loop through the allOptions array and get the value. You are able to make a newArray on top of the forEach function and use newArray.push() to push all the values in an array

<select class="select" data-original-title="" title="">
    <option value="">-- Select Template --</option>
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>`

I the following code works for your radio example:

(function myFunc() {
        document.addEventListener("DOMContentLoaded", function() {
           let radioContainer = document.querySelector(".radio")
           let newArray = []
           let allOptions = radioContainer.querySelectorAll("input")
           allOptions.forEach(input => {
             newArray.push(input.value)
           })
           console.log(newArray)
        })
      }())

<div class="radio">
    <label class="radio-inline">
        <input tabindex="7" onclick="hidetyping_translt()" name="txtSelectedLanguage" id="txtSelectedLanguage1" value="English" checked="checked" type="radio">
        English
    </label>
    <label class="radio-inline">
        <input tabindex="8" onclick="showtyping_translt()" name="txtSelectedLanguage" id="txtSelectedLanguage2" value="Other" type="radio">
        Other Language
    </label>
    <label class="radio-inline">
        <input tabindex="9" onclick="hidetyping_translt()" name="txtSelectedLanguage" id="txtSelectedLanguage3" value="Flash" type="radio">
        Flash SMS
    </label>
</div>

Answer 3

Don't really understand the question. Do you want a JS Array out of the Values and Labels?

Try these:

 $(function() { var selectObj = {}; // better would be if you have an ID on your select to avoid problems $('select option').each(function(k,v){ selectObj[k] = $(v).html(); }); console.log(selectObj); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <select data-original-title="" title=""> <option value="">-- Select Template --</option> <option value="1">a</option> <option value="2">b</option> <option value="3">c</option> </select>` 

and for your radio buttons (but i dont like the output of your html, thats not really ready to use with JS):

 $(function() { var radioObj = {}; $('.radio label').each(function(){ var k = $('input', $(this)).attr('value'), v = $(this).text().trim(); radioObj[k] = v; }); console.log(radioObj); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="radio"> <label class="radio-inline"> <input tabindex="7" onclick="hidetyping_translt()" name="txtSelectedLanguage" id="txtSelectedLanguage1" value="English" checked="checked" type="radio"> English </label> <label class="radio-inline"> <input tabindex="8" onclick="showtyping_translt()" name="txtSelectedLanguage" id="txtSelectedLanguage2" value="Other" type="radio"> Other Language </label> <label class="radio-inline"> <input tabindex="9" onclick="hidetyping_translt()" name="txtSelectedLanguage" id="txtSelectedLanguage3" value="Flash" type="radio"> Flash SMS </label> </div>