提交表单后将值保留在下拉列表中

Question

提交表单后如何在下拉列表中显示选中的选项?它总是显示第一个选项

<form id="myform" >
<label for="selectoption">Birimler</label>
<select id="SelectOption" name="SelectOption" onchange="$('#myform').submit();" value="a">
<option>Seçiniz</option>
<option id="aYo" value="Yonetim">Yönetim</option>
<option id="aAr"  value="Arge">ARGE</option>
<option id="aDe"  value="Depo">Depo/Sevkiyat</option>
<option id="aIK"  value="IKID">İnsan Kaynakları/İdari İşler</option>        
</select>
</form>

Answer 1

Try this:
<script type="text/javascript">
function getOption() {
selectElement = document.querySelector('#selectoption');
output = selectElement.value;
document.querySelector('.output').textContent = output;
}
</script>

或者试试这个:

selectElement.options[selectElement.selectedIndex].value

selectedIndex——用于设置或获取集合中所选元素的索引。

length——这是一个只读属性，用于获取集合中元素的个数。

Answer 2

您可以将值保存在localStorage中，如:

localStorage.setItem('selectOption', $(#SelectOption).val());

那么你的浏览器会记住这个值，即使在页面重新加载(表单发送)，然后你可以通过获取值

来填写你的表单

$(#SelectOption).val(localStorage.getItem('selectOption'))

Answer 3

如果事件是可取消的，则preventDefault()方法将取消该事件，这意味着属于该事件的默认操作将不会发生。

例如，在以下情况下可以使用:

点击"提交"按钮，阻止它提交表单单击链接，防止链接跟随URL请点击此链接。

试试这个

$(document).ready(function(){
$('#SelectOption').change(function (e) {
console.log($( "#SelectOption" ).val())
let SelectOptionValue = $( "#SelectOption" ).val()
console.log("click",SelectOptionValue)
// $('#myform').submit();
$( "#SelectOption" ).val("Depo")
console.log($( "#SelectOption" ).val())
console.log("click")
e.preventDefault();
});
});

Answer 4

usedviewbag

<select style="width:100px" id="SelectOption" name="SelectOption" value="a">

<option>@Html.Label("-",(string)ViewBag.Name,new {@class = "mylabel" })</option>