CODEWITHSUNDEEP
javascriptjquery
Matthew
Matthew

Reputation: 683

JS: Change select option value on being selected with prompt?

I've looked around and I don't see this being asked before.

I have a select box, like so:

<select onchange="change()">
  <option value="" selected>Option 1</option>
  <option value="30">Option 2</option>
  <option value="90">Option 3</option>
</select>

I want to add another option...

  <option value="custom">Option 4</option>

...that when chosen (clicked) an alert box will popup asking the user to type in a number (in the case 30 or 90 weren't viable options, as in the values of the option's) to replace the value of the option.

<script>
function change() {
  if(value == "custom") {
    value = prompt("Please enter a new number:", "60");
  }
}
</script>

I wanted to know what the best way to do this is with plain old javascript - I'll use jQuery if I have to.

Any ideas? An example would be great as well.

Upvotes: 3

Views: 4279

Answers (2)

A.Sharma
A.Sharma

Reputation: 2799

Take a look at this code. I think this is what you're trying to do:

HTML

<select id="optionvals" onclick="change()">
  <option value="" selected>Option 1</option>
  <option value="30">Option 2</option>
  <option value="90">Option 3</option>
  <option value="custom">Option 4</option>
</select>

JS

function change() {
  var oItem = document.getElementById('optionvals');
  var value = oItem.options[oItem.selectedIndex].value;
  if(value == "custom") {
    alert("you've clicked b");
    value = prompt("Please enter a new number:", "60");
    oItem.options[oItem.selectedIndex].value = value;
    console.log(oItem.options[oItem.selectedIndex].value)
  }
}

What this does is prompt you on the change only if the selected value in the options is custom. Then after you choose a custom value, it will rewrite the value of that the custom option element to the value you just entered in the prompt. I logged the new value after assigning it to show you that it is working.

Here is a fiddle: https://jsfiddle.net/ng7xvy05/

Upvotes: 1

micah
micah

Reputation: 8096

Your onchange event is the appropriate way to handle this. This is mostly a matter of user interface (UX) design though. To do this in the prompt fashion you ought to use parseFloat:

change() {
  var value = prompt('You\'ve chosen Other. Please enter a value', '60');
  if(value) {
    value = parseFloat(value);
    // apply it to your model
  } else {
    // apply NULL to your model
  }
}

From a UXD point of view I would use a typeahead input. It would autosearch known answers but also allow the user to input their own. This is not standard html so you would need to write this yourself or use jquery. But from a user interface design point of view, prompts suck.

Upvotes: 1

Related Questions