Question

I have a form which is largely populated by checkboxes. The checkboxes each have an ID “value” that corresponds to an item within a javascript array. The array items hold some text that will populate a textarea.

I would like to include some dropdown boxes to clean up the site; however, I cannot seem to assign an array ID to the dropdown options? Can this be done in a selectbox option? Is there a workaround to simulate a selectbox without using the tab?

My html is basically:

    <div>
    <input type=checkbox id=array1 name=textArray></input>
    <input type=checkbox id=array1 name=textArray></input>
    <input type=checkbox id=array1 name=textArray></input>
    ...
    <select><option 1><option 2>...</select>
    </div>
    <div>
    <form>
    <textarea id=outPut></textarea>
    </form>
    </div>

And my js is:

var textArray = {

array1: 'some text here',
array2: 'some more text',
array3: 'some other text',
...
array90: 'the last text'

};

// variable assigned to chosen item
var selectedInputs = document.getElementsByName("textArray");
for (var i = 0; i < selectedInputs.length; i++) {
    selectedInputs[i].onchange = function() {
        chosenItem = this;
        printText();        
    };
}
// Script to add items to the Comments section text area
var mytextbox = document.getElementById('outPut');
var chosenItem = null;

function printText(){
    if(chosenItem !== null){
       mytextbox.value += textArray[chosenItem.id] + "";
        // resets the radio box values after output is displayed
        chosenItem.checked = false;
        // resets these variables to the null state
        chosenItem = null;
    }
}

How can I associate an item in my js array with one of the selectbox choices?

Answer 1

I found it very difficult to understand what you’re asking but I threw this together and hopefully it’ll be helpful.

Important bit is

var selectNode = document.getElementById('select'); // <select id="select">
selectNode.onchange = function () {
  if (selectNode.selectedIndex !== 0) {
    chosenItem = selectNode.options[selectNode.selectedIndex];
    selectNode.selectedIndex = 0;
    printText();
  }
}

and not to use the id attribute for what you’re doing (I used data-i).

---

I’d also like to say that if you’re cleaning up code this would be a good time to strongly reconsider how you’re passing variables between functions; setting a value in the global namespace and relying on it in the next invocation is just asking for trouble (race conditions, conflicts with other bits of code, etc).