JS: Ändern Sie den Optionswert, wenn Sie mit Prompt ausgewählt werden?

Question

Ich habe mich umgesehen und ich sehe nicht, dass das vorher gefragt wird.

Ich habe eine Auswahlbox, etwa so:

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

ich eine andere Option hinzufügen möchten ...

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

... dass, wenn gewählt (angeklickt) ein Warnfeld wird popup den Benutzer bitten, eine Zahl einzugeben (in dem Fall 30 oder 90 waren nicht praktikable Optionen, wie in den Werten der Option), um den Wert der Option zu ersetzen.

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

wollte ich wissen, was der beste Weg, dies zu tun mit einfachen alten Javascript ist - werde ich jQuery verwenden, wenn ich muss.

Irgendwelche Ideen? Ein Beispiel wäre auch großartig.

Answer 1

Schauen Sie sich diesen Code an. Ich denke, das ist das, was Sie versuchen zu tun:

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) 
    } 
} 

Was das bedeutet ist prompt Sie auf die Änderung nur dann, wenn der ausgewählte Wert in den Optionen ist custom. Nachdem Sie einen benutzerdefinierten Wert ausgewählt haben, überschreibt er den Wert des Optionselementes custom auf den Wert, den Sie in der Eingabeaufforderung eingegeben haben. Ich habe den neuen Wert protokolliert, nachdem er zugewiesen wurde, um Ihnen zu zeigen, dass er funktioniert.

Hier eine Geige ist: https://jsfiddle.net/ng7xvy05/

Answer 2

Ihr onchange Ereignis ist der geeignete Weg, damit umzugehen. Dies ist jedoch hauptsächlich eine Frage des User Interface (UX) -Designs. Um dies zu tun in der Eingabeaufforderung Art und Weise, Sie sollten parseFloat verwenden:

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 
    } 
} 

Aus UXD Sicht würde ich eine typeahead Eingabe verwenden. Es würde bekannte Antworten automatisch durchsuchen, aber auch dem Benutzer erlauben, eigene Antworten einzugeben. Dies ist kein Standard-HTML, also müssten Sie dies selbst schreiben oder jquery verwenden. Aber vom Standpunkt der Benutzerschnittstelle aus gesehen, sind Ansagen saugend.