replace the contents of javascript with the option command

Question

I want to create a command from the option and go to javascript then display it in the input box.

<select id="change">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>

<script type="text/javascript">
show('Cat');
</script>

<input/>

when I choose one of the options, then the contents automatically in the javascript changed. and the reload function runs then displays the result in the input box.

Dachi Natsvlishvili · Accepted Answer · 2018-04-04T16:12:19.700

2

You can try adjusting to your best needs from this snippet

<select id="change">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>

<script type="text/javascript">
  document.getElementById('change').addEventListener('change', function(e) {
    document.getElementsByTagName('input')[0].value = e.target.value;
  });
</script>

<input/>

If you want to call show with selected value you can have

document.getElementById('change').addEventListener('change', function(e) {
  var selected = e.target.value;
  show(selected);
});

edited Apr 04 '18 at 16:12

answered Apr 04 '18 at 15:02

Dachi Natsvlishvili

134
1
4

I mean, how to change the contents of javascript via the options command. so when I choose one of the options, the automatic value in javascript is changed in the `show('xxValueFromOptionxx');` code – Yan LimaBenua Apr 04 '18 at 15:15
you can replace `document.getElementsByTagName('input')[0].value = e.target.value;` with `show(e.target.value);` – Dachi Natsvlishvili Apr 04 '18 at 16:08
problem solved. thanks – Yan LimaBenua Apr 04 '18 at 17:07

score 1 · Answer 2 · answered Apr 04 '18 at 15:19

Try this.

function a(select) {
var input = document.getElementById("input");
if (select.value !== "Select option") {
input.value = select.value;
}
else {
input.value=""
}
}

<select id="change" onchange="a(this)">
    <option>Select option</option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>

<input id="input" />

score 1 · Answer 3 · answered Apr 04 '18 at 16:02

Hm not sure what your are trying to achieve but this works if your use a normal browser:

//Targets
select = document.getElementById("change");
print = document.getElementById("value");

//Function print option
printOption = function(loc, option) {
 loc.innerHTML = option;
}

//Function force value
optionPicker = function(option) {
 select.value = option;
  printOption(print, option);
};

//Change Listener
document.addEventListener("change", function(e){
 if(e.target.id === "change")
   printOption(print, e.target.value);
}, false);

//Commands
optionPicker("Dog");

<select id="change">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<div id="value"></div>

replace the contents of javascript with the option command

3 Answers3