Ich habe ein Textfeld und habe versucht, es nach einem Klick auf die Schaltfläche zurückzusetzen. Aber es wird nicht zurückgesetzt. HTML-Skript: -
<input type="text" name="" class="input-default" id="inp">
<button type="submit" class="btn btn-success btn-sm m-b-10 m-l-5" onclick="add()">Add</button>
<select id='pre-selected-options' multiple='multiple'>
<option value='elem_1' selected>1</option>
<option value='elem_2'>a</option>
<option value='elem_3'>x</option>
<option value='elem_4' selected>Ce</option>
<option value='elem_100'>Td</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.multi-select.js"></script>
JavaScript-Code: -
var x;
var option;
var y;
function add() {
var x = document.getElementById('pre-selected-options');
console.log(x);
var option = document.createElement("option");
option.text = document.getElementById("inp").value;
var y = option.text
x.add(option);
$('#pre-selected-options').multiSelect('addOption', {
value: y,
text: y,
index: 0,
nested: 'optgroup_label'
});
document.getElementById('pre-selected-options').reset();
}
$('#pre-selected-options').multiSelect();
Ich habe versucht, dies hinzuzufügen und das Formular nicht zurückzusetzen:
document.getElementById('pre-selected-options').reset();
4 Antworten
Das Problem, mit dem Sie hier konfrontiert sind, besteht darin, dass Sie versuchen, das Eingabefeld mit der ID inp zu löschen, während Sie pre-selected-options aufrufen, das nicht mit Ihrem Textfeld verbunden ist.
Die Verwendung von document.getElementById('inp').value = "" sollte den Wert Ihres Textfelds löschen.
Verwenden Sie zum Zurücksetzen eines Formulars
form.reset();
var form = document.querySelector('form');
var button = document.querySelector('button');
button.addEventListener('click', function() {
form.reset();
})<form>
<input value="volvo">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button type="button">Reset form</button>
</form>Um einen Wert auf z. input, benutze
input.value = '';
var input = document.querySelector('input');
var button = document.querySelector('button');
button.addEventListener('click', function() {
input.value = '';
})<input value="volvo">
<button>Reset to none</button>Um einen Wert auf z. select, benutze
select.selectedIndex = 0; // select first option
select.selectedIndex = -1; // select none
var select = document.querySelector('select');
var button = document.querySelector('button');
button.addEventListener('click', function() {
select.selectedIndex = -1; // select none
})<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button>Reset Select to none</button>So setzen Sie das Formular mithilfe von jQuery zurück
$("form")[0].reset();
Um den Wert des Eingabefelds zu löschen, verwenden Sie:
document.getElementById('pre-selected-options').value = "";
https://www.w3schools.com/howto/howto_html_clear_input.asp