how to add multiple values to one option in a listbox javascript

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

Currently I have a listbox with apples, oranges and pears in it. Each one of those has a specific value. When the user makes a selection the corresponding value gets displayed on the page.

What I want to do is instead put two different values on each option. I want apples to have the value of 10000 and also 20000 and oranges 20000 and 50000 and pears 30000 and 20000, and I want to have two scenarios , one where when the user makes a selection and the first value gets displayed on the page and a second scenario where the second value gets displayed. I'm not sure how to do it ?

function test() {



  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b[a].value);



  document.getElementById("demo").innerHTML = c;

}

<p id="demo"></p>



<form>

  <select id="listboxtest" onchange="test()">



    <option value=10000> apples </option>

    <option value=20000> oranges </option>

    <option value=30000> pears </option>



  </select>

  <form>

edited Jan 3 at 8:37

mplungjan

90.3k22127184

asked Jan 3 at 8:35

timjest1234

If you are not sure, how should we know? You want two buttons? A checkbox? What?

– mplungjan
Jan 3 at 8:38

To have two values you can do value="200000|500000" and split on |

– mplungjan
Jan 3 at 8:40

You can refer below link stackoverflow.com/questions/3245967/…

– NPE
Jan 3 at 8:40

Will those be displayed randomly?

– Brian Le
Jan 3 at 8:42

There will be troubles at the server-side when trying to select a correct value from multiple values. Use a separate JS data array, and fetch the values based on the index which is stored to the select element.

– Teemu
Jan 3 at 8:45

add a comment |

Currently I have a listbox with apples, oranges and pears in it. Each one of those has a specific value. When the user makes a selection the corresponding value gets displayed on the page.

function test() {



  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b[a].value);



  document.getElementById("demo").innerHTML = c;

}

<p id="demo"></p>



<form>

  <select id="listboxtest" onchange="test()">



    <option value=10000> apples </option>

    <option value=20000> oranges </option>

    <option value=30000> pears </option>



  </select>

  <form>

edited Jan 3 at 8:37

mplungjan

90.3k22127184

asked Jan 3 at 8:35

timjest1234

If you are not sure, how should we know? You want two buttons? A checkbox? What?

– mplungjan
Jan 3 at 8:38

To have two values you can do value="200000|500000" and split on |

– mplungjan
Jan 3 at 8:40

You can refer below link stackoverflow.com/questions/3245967/…

– NPE
Jan 3 at 8:40

Will those be displayed randomly?

– Brian Le
Jan 3 at 8:42

There will be troubles at the server-side when trying to select a correct value from multiple values. Use a separate JS data array, and fetch the values based on the index which is stored to the select element.

– Teemu
Jan 3 at 8:45

add a comment |

Currently I have a listbox with apples, oranges and pears in it. Each one of those has a specific value. When the user makes a selection the corresponding value gets displayed on the page.

function test() {



  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b[a].value);



  document.getElementById("demo").innerHTML = c;

}

<p id="demo"></p>



<form>

  <select id="listboxtest" onchange="test()">



    <option value=10000> apples </option>

    <option value=20000> oranges </option>

    <option value=30000> pears </option>



  </select>

  <form>

edited Jan 3 at 8:37

mplungjan

90.3k22127184

asked Jan 3 at 8:35

timjest1234

Currently I have a listbox with apples, oranges and pears in it. Each one of those has a specific value. When the user makes a selection the corresponding value gets displayed on the page.

function test() {



  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b[a].value);



  document.getElementById("demo").innerHTML = c;

}

<p id="demo"></p>



<form>

  <select id="listboxtest" onchange="test()">



    <option value=10000> apples </option>

    <option value=20000> oranges </option>

    <option value=30000> pears </option>



  </select>

  <form>

function test() {



  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b[a].value);



  document.getElementById("demo").innerHTML = c;

}

<p id="demo"></p>



<form>

  <select id="listboxtest" onchange="test()">



    <option value=10000> apples </option>

    <option value=20000> oranges </option>

    <option value=30000> pears </option>



  </select>

  <form>

function test() {



  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b[a].value);



  document.getElementById("demo").innerHTML = c;

}

<p id="demo"></p>



<form>

  <select id="listboxtest" onchange="test()">



    <option value=10000> apples </option>

    <option value=20000> oranges </option>

    <option value=30000> pears </option>



  </select>

  <form>

javascript listbox

edited Jan 3 at 8:37

mplungjan

90.3k22127184

asked Jan 3 at 8:35

timjest1234

edited Jan 3 at 8:37

mplungjan

90.3k22127184

asked Jan 3 at 8:35

timjest1234

edited Jan 3 at 8:37

mplungjan

90.3k22127184

edited Jan 3 at 8:37

mplungjan

90.3k22127184

edited Jan 3 at 8:37

mplungjan

90.3k22127184

asked Jan 3 at 8:35

timjest1234

asked Jan 3 at 8:35

timjest1234

asked Jan 3 at 8:35

timjest1234

If you are not sure, how should we know? You want two buttons? A checkbox? What?

– mplungjan
Jan 3 at 8:38

To have two values you can do value="200000|500000" and split on |

– mplungjan
Jan 3 at 8:40

You can refer below link stackoverflow.com/questions/3245967/…

– NPE
Jan 3 at 8:40

Will those be displayed randomly?

– Brian Le
Jan 3 at 8:42

There will be troubles at the server-side when trying to select a correct value from multiple values. Use a separate JS data array, and fetch the values based on the index which is stored to the select element.

– Teemu
Jan 3 at 8:45

add a comment |

If you are not sure, how should we know? You want two buttons? A checkbox? What?

– mplungjan
Jan 3 at 8:38

To have two values you can do value="200000|500000" and split on |

– mplungjan
Jan 3 at 8:40

You can refer below link stackoverflow.com/questions/3245967/…

– NPE
Jan 3 at 8:40

Will those be displayed randomly?

– Brian Le
Jan 3 at 8:42

There will be troubles at the server-side when trying to select a correct value from multiple values. Use a separate JS data array, and fetch the values based on the index which is stored to the select element.

– Teemu
Jan 3 at 8:45

If you are not sure, how should we know? You want two buttons? A checkbox? What?

– mplungjan
Jan 3 at 8:38

To have two values you can do value="200000|500000" and split on |

– mplungjan
Jan 3 at 8:40

You can refer below link stackoverflow.com/questions/3245967/…

– NPE
Jan 3 at 8:40

Will those be displayed randomly?

– Brian Le
Jan 3 at 8:42

There will be troubles at the server-side when trying to select a correct value from multiple values. Use a separate JS data array, and fetch the values based on the index which is stored to the select element.

– Teemu
Jan 3 at 8:45

add a comment |

2 Answers
2

active

oldest

votes

do the below example,

var index = 0;

function test() {

  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b [a].value.split(',')[index]);

  document.getElementById("demo").innerHTML = c;

  index = 0;

}



function test2() { 

  index = 1;

  test();

  

}

test();

.button { 

  cursor:pointer;

  border:1px solid grey;

  padding:6px 12px;

  background-color:#e8e8e8;

  border-radius:5px;

}



#listboxtest {

  padding:6px 12px;

  border-radius:5px;

}

<p id="demo"></p>



<form>

<select id = "listboxtest" onchange = "test()">

  <option value = '10000,20000'> apples </option>

  <option value = '20000,50000'> oranges </option>

  <option value = '30000,80000'> pears </option>

</select>

<span class="button" onclick="test2()">Change Value</span>

<form>

edited Jan 4 at 9:44

answered Jan 3 at 8:43

user6656728

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and a button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:57

@timjest1234 updated my code, upvote and accept my answer if it works

– user6656728
Jan 4 at 9:45

add a comment |

I have used a set radio buttons to check if it is a first or second value:

<form>

    <p>Select your choice to display value:</p>

    <div>

        <input type="radio" id="choice1" name="val" value="0" onchange="test()">

        <label for="choice1">First value</label>

        <input type="radio" id="choice2" name="val" value="1" onchange="test()">

        <label for="choice2">Second value</label>

    </div>

    <br>

    <select id="listboxtest" onchange="test()">

        <option value='10000|20000'> apples </option>

        <option value='20000|50000'> oranges </option>

        <option value='30000|20000'> pears </option>

    </select>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test() {

    let a = document.getElementById("listboxtest").selectedIndex;

    let b = document.getElementById("listboxtest").options;

    let tokens = (b[a].value).split("|");

    let x = document.querySelector('input[name="val"]:checked').value;

    document.getElementById("result").innerHTML = tokens[x];

}

EDIT: Second Scenario

...what im trying to do now is , to just have one listbox and one button
. the first value gets called on the onchange and the second value
gets called when the user clicks the button. how could i do this ?

<body onload="test()">

<form>     

    <p>Select your choice or click button:</p>

    <select id="listbox" onchange="test(this.id)">

        <option value='apples'> apples </option>

        <option value='oranges'> oranges </option>

        <option value='pears'> pears </option>

    </select>

    <br><br>

    <button id="button" type="button" onclick="test(this.id)">Press</button>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test(elementId = 'formload') {



    var selectionValues = ;

    selectionValues['apples'] = {first: 10000, second: 20000};

    selectionValues['oranges'] = {first: 20000, second: 50000};

    selectionValues['pears'] = {first: 30000, second: 20000};



    var listVal = document.getElementById("listbox").value;

    var result = null;



    switch(elementId) {

        case 'formload': // same as selected value of list box

                         // this is when the page is refreshed

        case 'listbox':

            result = selectionValues[listVal].first;

            break;

        case 'button':

            result = selectionValues[listVal].second;

            break;   

    }



    document.getElementById("result").innerHTML = result;

}

edited Jan 4 at 13:00

answered Jan 3 at 10:37

prasad_

1,5881818

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and one button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:58

@timjest1234 I have posted a solution. I hope you can use it or some aspects of both the solutions to find a solution of your own.

– prasad_
Jan 4 at 12:43

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018785%2fhow-to-add-multiple-values-to-one-option-in-a-listbox-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

do the below example,

var index = 0;

function test() {

  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b [a].value.split(',')[index]);

  document.getElementById("demo").innerHTML = c;

  index = 0;

}



function test2() { 

  index = 1;

  test();

  

}

test();

.button { 

  cursor:pointer;

  border:1px solid grey;

  padding:6px 12px;

  background-color:#e8e8e8;

  border-radius:5px;

}



#listboxtest {

  padding:6px 12px;

  border-radius:5px;

}

<p id="demo"></p>



<form>

<select id = "listboxtest" onchange = "test()">

  <option value = '10000,20000'> apples </option>

  <option value = '20000,50000'> oranges </option>

  <option value = '30000,80000'> pears </option>

</select>

<span class="button" onclick="test2()">Change Value</span>

<form>

edited Jan 4 at 9:44

answered Jan 3 at 8:43

user6656728

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and a button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:57

@timjest1234 updated my code, upvote and accept my answer if it works

– user6656728
Jan 4 at 9:45

add a comment |

do the below example,

var index = 0;

function test() {

  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b [a].value.split(',')[index]);

  document.getElementById("demo").innerHTML = c;

  index = 0;

}



function test2() { 

  index = 1;

  test();

  

}

test();

.button { 

  cursor:pointer;

  border:1px solid grey;

  padding:6px 12px;

  background-color:#e8e8e8;

  border-radius:5px;

}



#listboxtest {

  padding:6px 12px;

  border-radius:5px;

}

<p id="demo"></p>



<form>

<select id = "listboxtest" onchange = "test()">

  <option value = '10000,20000'> apples </option>

  <option value = '20000,50000'> oranges </option>

  <option value = '30000,80000'> pears </option>

</select>

<span class="button" onclick="test2()">Change Value</span>

<form>

edited Jan 4 at 9:44

answered Jan 3 at 8:43

user6656728

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and a button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:57

@timjest1234 updated my code, upvote and accept my answer if it works

– user6656728
Jan 4 at 9:45

add a comment |

do the below example,

var index = 0;

function test() {

  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b [a].value.split(',')[index]);

  document.getElementById("demo").innerHTML = c;

  index = 0;

}



function test2() { 

  index = 1;

  test();

  

}

test();

.button { 

  cursor:pointer;

  border:1px solid grey;

  padding:6px 12px;

  background-color:#e8e8e8;

  border-radius:5px;

}



#listboxtest {

  padding:6px 12px;

  border-radius:5px;

}

<p id="demo"></p>



<form>

<select id = "listboxtest" onchange = "test()">

  <option value = '10000,20000'> apples </option>

  <option value = '20000,50000'> oranges </option>

  <option value = '30000,80000'> pears </option>

</select>

<span class="button" onclick="test2()">Change Value</span>

<form>

edited Jan 4 at 9:44

answered Jan 3 at 8:43

user6656728

do the below example,

var index = 0;

function test() {

  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b [a].value.split(',')[index]);

  document.getElementById("demo").innerHTML = c;

  index = 0;

}



function test2() { 

  index = 1;

  test();

  

}

test();

.button { 

  cursor:pointer;

  border:1px solid grey;

  padding:6px 12px;

  background-color:#e8e8e8;

  border-radius:5px;

}



#listboxtest {

  padding:6px 12px;

  border-radius:5px;

}

<p id="demo"></p>



<form>

<select id = "listboxtest" onchange = "test()">

  <option value = '10000,20000'> apples </option>

  <option value = '20000,50000'> oranges </option>

  <option value = '30000,80000'> pears </option>

</select>

<span class="button" onclick="test2()">Change Value</span>

<form>

var index = 0;

function test() {

  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b [a].value.split(',')[index]);

  document.getElementById("demo").innerHTML = c;

  index = 0;

}



function test2() { 

  index = 1;

  test();

  

}

test();

.button { 

  cursor:pointer;

  border:1px solid grey;

  padding:6px 12px;

  background-color:#e8e8e8;

  border-radius:5px;

}



#listboxtest {

  padding:6px 12px;

  border-radius:5px;

}

<p id="demo"></p>



<form>

<select id = "listboxtest" onchange = "test()">

  <option value = '10000,20000'> apples </option>

  <option value = '20000,50000'> oranges </option>

  <option value = '30000,80000'> pears </option>

</select>

<span class="button" onclick="test2()">Change Value</span>

<form>

var index = 0;

function test() {

  var a = document.getElementById("listboxtest").selectedIndex;

  var b = document.getElementById("listboxtest").options;

  var c = (b [a].value.split(',')[index]);

  document.getElementById("demo").innerHTML = c;

  index = 0;

}



function test2() { 

  index = 1;

  test();

  

}

test();

.button { 

  cursor:pointer;

  border:1px solid grey;

  padding:6px 12px;

  background-color:#e8e8e8;

  border-radius:5px;

}



#listboxtest {

  padding:6px 12px;

  border-radius:5px;

}

<p id="demo"></p>



<form>

<select id = "listboxtest" onchange = "test()">

  <option value = '10000,20000'> apples </option>

  <option value = '20000,50000'> oranges </option>

  <option value = '30000,80000'> pears </option>

</select>

<span class="button" onclick="test2()">Change Value</span>

<form>

edited Jan 4 at 9:44

answered Jan 3 at 8:43

user6656728

edited Jan 4 at 9:44

answered Jan 3 at 8:43

user6656728

answered Jan 3 at 8:43

user6656728

answered Jan 3 at 8:43

user6656728

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and a button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:57

@timjest1234 updated my code, upvote and accept my answer if it works

– user6656728
Jan 4 at 9:45

add a comment |

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and a button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:57

@timjest1234 updated my code, upvote and accept my answer if it works

– user6656728
Jan 4 at 9:45

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and a button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:57

@timjest1234 updated my code, upvote and accept my answer if it works

– user6656728
Jan 4 at 9:45

add a comment |

I have used a set radio buttons to check if it is a first or second value:

<form>

    <p>Select your choice to display value:</p>

    <div>

        <input type="radio" id="choice1" name="val" value="0" onchange="test()">

        <label for="choice1">First value</label>

        <input type="radio" id="choice2" name="val" value="1" onchange="test()">

        <label for="choice2">Second value</label>

    </div>

    <br>

    <select id="listboxtest" onchange="test()">

        <option value='10000|20000'> apples </option>

        <option value='20000|50000'> oranges </option>

        <option value='30000|20000'> pears </option>

    </select>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test() {

    let a = document.getElementById("listboxtest").selectedIndex;

    let b = document.getElementById("listboxtest").options;

    let tokens = (b[a].value).split("|");

    let x = document.querySelector('input[name="val"]:checked').value;

    document.getElementById("result").innerHTML = tokens[x];

}

EDIT: Second Scenario

...what im trying to do now is , to just have one listbox and one button
. the first value gets called on the onchange and the second value
gets called when the user clicks the button. how could i do this ?

<body onload="test()">

<form>     

    <p>Select your choice or click button:</p>

    <select id="listbox" onchange="test(this.id)">

        <option value='apples'> apples </option>

        <option value='oranges'> oranges </option>

        <option value='pears'> pears </option>

    </select>

    <br><br>

    <button id="button" type="button" onclick="test(this.id)">Press</button>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test(elementId = 'formload') {



    var selectionValues = ;

    selectionValues['apples'] = {first: 10000, second: 20000};

    selectionValues['oranges'] = {first: 20000, second: 50000};

    selectionValues['pears'] = {first: 30000, second: 20000};



    var listVal = document.getElementById("listbox").value;

    var result = null;



    switch(elementId) {

        case 'formload': // same as selected value of list box

                         // this is when the page is refreshed

        case 'listbox':

            result = selectionValues[listVal].first;

            break;

        case 'button':

            result = selectionValues[listVal].second;

            break;   

    }



    document.getElementById("result").innerHTML = result;

}

edited Jan 4 at 13:00

answered Jan 3 at 10:37

prasad_

1,5881818

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and one button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:58

@timjest1234 I have posted a solution. I hope you can use it or some aspects of both the solutions to find a solution of your own.

– prasad_
Jan 4 at 12:43

add a comment |

I have used a set radio buttons to check if it is a first or second value:

<form>

    <p>Select your choice to display value:</p>

    <div>

        <input type="radio" id="choice1" name="val" value="0" onchange="test()">

        <label for="choice1">First value</label>

        <input type="radio" id="choice2" name="val" value="1" onchange="test()">

        <label for="choice2">Second value</label>

    </div>

    <br>

    <select id="listboxtest" onchange="test()">

        <option value='10000|20000'> apples </option>

        <option value='20000|50000'> oranges </option>

        <option value='30000|20000'> pears </option>

    </select>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test() {

    let a = document.getElementById("listboxtest").selectedIndex;

    let b = document.getElementById("listboxtest").options;

    let tokens = (b[a].value).split("|");

    let x = document.querySelector('input[name="val"]:checked').value;

    document.getElementById("result").innerHTML = tokens[x];

}

EDIT: Second Scenario

...what im trying to do now is , to just have one listbox and one button
. the first value gets called on the onchange and the second value
gets called when the user clicks the button. how could i do this ?

<body onload="test()">

<form>     

    <p>Select your choice or click button:</p>

    <select id="listbox" onchange="test(this.id)">

        <option value='apples'> apples </option>

        <option value='oranges'> oranges </option>

        <option value='pears'> pears </option>

    </select>

    <br><br>

    <button id="button" type="button" onclick="test(this.id)">Press</button>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test(elementId = 'formload') {



    var selectionValues = ;

    selectionValues['apples'] = {first: 10000, second: 20000};

    selectionValues['oranges'] = {first: 20000, second: 50000};

    selectionValues['pears'] = {first: 30000, second: 20000};



    var listVal = document.getElementById("listbox").value;

    var result = null;



    switch(elementId) {

        case 'formload': // same as selected value of list box

                         // this is when the page is refreshed

        case 'listbox':

            result = selectionValues[listVal].first;

            break;

        case 'button':

            result = selectionValues[listVal].second;

            break;   

    }



    document.getElementById("result").innerHTML = result;

}

edited Jan 4 at 13:00

answered Jan 3 at 10:37

prasad_

1,5881818

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and one button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:58

@timjest1234 I have posted a solution. I hope you can use it or some aspects of both the solutions to find a solution of your own.

– prasad_
Jan 4 at 12:43

add a comment |

I have used a set radio buttons to check if it is a first or second value:

<form>

    <p>Select your choice to display value:</p>

    <div>

        <input type="radio" id="choice1" name="val" value="0" onchange="test()">

        <label for="choice1">First value</label>

        <input type="radio" id="choice2" name="val" value="1" onchange="test()">

        <label for="choice2">Second value</label>

    </div>

    <br>

    <select id="listboxtest" onchange="test()">

        <option value='10000|20000'> apples </option>

        <option value='20000|50000'> oranges </option>

        <option value='30000|20000'> pears </option>

    </select>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test() {

    let a = document.getElementById("listboxtest").selectedIndex;

    let b = document.getElementById("listboxtest").options;

    let tokens = (b[a].value).split("|");

    let x = document.querySelector('input[name="val"]:checked').value;

    document.getElementById("result").innerHTML = tokens[x];

}

EDIT: Second Scenario

...what im trying to do now is , to just have one listbox and one button
. the first value gets called on the onchange and the second value
gets called when the user clicks the button. how could i do this ?

<body onload="test()">

<form>     

    <p>Select your choice or click button:</p>

    <select id="listbox" onchange="test(this.id)">

        <option value='apples'> apples </option>

        <option value='oranges'> oranges </option>

        <option value='pears'> pears </option>

    </select>

    <br><br>

    <button id="button" type="button" onclick="test(this.id)">Press</button>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test(elementId = 'formload') {



    var selectionValues = ;

    selectionValues['apples'] = {first: 10000, second: 20000};

    selectionValues['oranges'] = {first: 20000, second: 50000};

    selectionValues['pears'] = {first: 30000, second: 20000};



    var listVal = document.getElementById("listbox").value;

    var result = null;



    switch(elementId) {

        case 'formload': // same as selected value of list box

                         // this is when the page is refreshed

        case 'listbox':

            result = selectionValues[listVal].first;

            break;

        case 'button':

            result = selectionValues[listVal].second;

            break;   

    }



    document.getElementById("result").innerHTML = result;

}

edited Jan 4 at 13:00

answered Jan 3 at 10:37

prasad_

1,5881818

I have used a set radio buttons to check if it is a first or second value:

<form>

    <p>Select your choice to display value:</p>

    <div>

        <input type="radio" id="choice1" name="val" value="0" onchange="test()">

        <label for="choice1">First value</label>

        <input type="radio" id="choice2" name="val" value="1" onchange="test()">

        <label for="choice2">Second value</label>

    </div>

    <br>

    <select id="listboxtest" onchange="test()">

        <option value='10000|20000'> apples </option>

        <option value='20000|50000'> oranges </option>

        <option value='30000|20000'> pears </option>

    </select>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test() {

    let a = document.getElementById("listboxtest").selectedIndex;

    let b = document.getElementById("listboxtest").options;

    let tokens = (b[a].value).split("|");

    let x = document.querySelector('input[name="val"]:checked').value;

    document.getElementById("result").innerHTML = tokens[x];

}

EDIT: Second Scenario

...what im trying to do now is , to just have one listbox and one button
. the first value gets called on the onchange and the second value
gets called when the user clicks the button. how could i do this ?

<body onload="test()">

<form>     

    <p>Select your choice or click button:</p>

    <select id="listbox" onchange="test(this.id)">

        <option value='apples'> apples </option>

        <option value='oranges'> oranges </option>

        <option value='pears'> pears </option>

    </select>

    <br><br>

    <button id="button" type="button" onclick="test(this.id)">Press</button>

    <br><br>

    Result: <p id="result"></p>

</form>



<script src="test.js"></script>

test.js:

function test(elementId = 'formload') {



    var selectionValues = ;

    selectionValues['apples'] = {first: 10000, second: 20000};

    selectionValues['oranges'] = {first: 20000, second: 50000};

    selectionValues['pears'] = {first: 30000, second: 20000};



    var listVal = document.getElementById("listbox").value;

    var result = null;



    switch(elementId) {

        case 'formload': // same as selected value of list box

                         // this is when the page is refreshed

        case 'listbox':

            result = selectionValues[listVal].first;

            break;

        case 'button':

            result = selectionValues[listVal].second;

            break;   

    }



    document.getElementById("result").innerHTML = result;

}

edited Jan 4 at 13:00

answered Jan 3 at 10:37

prasad_

1,5881818

edited Jan 4 at 13:00

answered Jan 3 at 10:37

prasad_

1,5881818

answered Jan 3 at 10:37

prasad_

1,5881818

answered Jan 3 at 10:37

prasad_

1,5881818

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and one button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:58

@timjest1234 I have posted a solution. I hope you can use it or some aspects of both the solutions to find a solution of your own.

– prasad_
Jan 4 at 12:43

add a comment |

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and one button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:58

@timjest1234 I have posted a solution. I hope you can use it or some aspects of both the solutions to find a solution of your own.

– prasad_
Jan 4 at 12:43

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and one button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

– timjest1234
Jan 4 at 8:58

@timjest1234 I have posted a solution. I hope you can use it or some aspects of both the solutions to find a solution of your own.

– prasad_
Jan 4 at 12:43

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu