我有一个带有自定义选择下拉列表的表单。不知道如何将所选内容从select中获取到警报框中。
我试过了：
<body>
<div onchange="alert('Something important...');" id="Select" class="custom-select selectBoxKlasse Filter <?php echo $redTermin; ?>">
<select id="defaultSelect" name="terminselectAuto" class="alle_select select_Filter">
<option><?php echo $terminTitleB; ?></option>
<option>23. Dez. 2020</option>
<option>2. Jän. 2021</option>
<option>29. Feb. 2021</option>
<option> </option>
</select>
</div>
<script src="js/jquery-3.5.1.min.js" ></script><!--JQUERY-->
<script src="js/modernizr-custom.js" ></script><!--JQUERY-->
<script>
/*CUSTOM SELECT DROPDOWN LISTE BEGIN*/
//document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
//this.querySelector('.custom-select').classList.toggle('open');
//})
for (const option of document.querySelectorAll(".custom-option")) {
option.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
this.classList.add('selected');
this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
}
})
}
for (const dropdown of document.querySelectorAll(".custom-select-wrapper")) {
dropdown.addEventListener('click', function() {
this.querySelector('.custom-select').classList.toggle('open');
})
}
//window.addEventListener('click', function(e) {
// const select = document.querySelector('.custom-select')
// if (!select.contains(e.target)) {
// select.classList.remove('open');
// }
// });
window.addEventListener('click', function(e) {
for (const select of document.querySelectorAll('.custom-select')) {
if (!select.contains(e.target)) {
select.classList.remove('open');
}
}
});
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
</script>
</body>正如你在我的文章结尾所看到的，我在javascript方面不是最好的，所以我解决这个问题的尝试失败了，如果没有外部的任何帮助，根本没有希望完成这项工作。：)希望有人愿意帮助我
我忘了在顶部发布我使用的javascript的一部分：
´´/Klassenfilter BEGIN/
/*make this when termin is preselected onload*/
$( document ).ready(function() {
//Grap the url-proberty terminKlasse
let searchParams = new URLSearchParams(window.location.search);
searchParams.has('terminKlasse'); // true
let param = searchParams.get('terminKlasse');
//create the variables
var termin_klasse = param;
var alle_select_wrap = $(".selectBoxKlasse");
var alle_sel = $(".alle_select");
var clicked_Filt = termin_klasse;
clicked_Filter_Wrap = "." + clicked_Filt;
clicked_Filter_sel = ".select_" + clicked_Filt;
//display and disable Select-Boxes
$(clicked_Filter_Wrap).css( "display", "block" );
$(clicked_Filter_sel).prop( "disabled", false );
if(termin_klasse != null) {
$("#Select").css( "display", "none" );
$("#defaultSelect").prop( "disabled", "true" );
}
});
/*make this when FilterBTNS are clicked*/
$(".filter").click(function() {
//create the variables
var alle_select_wrapper = $(".selectBoxKlasse");
var alle_select = $(".alle_select");
var alle_Class = $(".checkClass");
var clicked_Filter = $(this).attr('id');
clicked_Filter_Wrapper = "." + clicked_Filter;
clicked_Filter_select = ".select_" + clicked_Filter;
clicked_Filter_class = ".class_" + clicked_Filter;
//display and disable Select-Boxes and Checkboxes
alle_select_wrapper.css( "display", "none" );
$(clicked_Filter_Wrapper).css( "display", "block" );
alle_select.prop( "disabled", true );
$(clicked_Filter_select).prop( "disabled", false );
alle_Class.prop( "checked", false);
$(clicked_Filter_class).prop( "checked", true);
//highlight and unlight filter Tabs when clicked
var alle_filter_tabs = $(".filter");
var clicked_Tab = $(this).attr('id');
clicked_Tab = "#" + clicked_Tab;
alle_filter_tabs.css({ "background" : "#ededed", "color" : "#000" });
$(clicked_Tab).css({ "background" : "#0066CC", "color" : "#FFF" });
});
/*Klassenfilter END*/
´´
也许失败就在这个部分。也许我禁用选择框有问题。
我建议使用eventlistener而不是内联onclick()
为id为的元素创建eventListener选择元素，侦听更改事件，然后读取属性.value并提醒它
document.getElementById('defaultSelect').addEventListener('change', function(){
alert(this.value);
});
<body>
<div id="Select" class="custom-select selectBoxKlasse Filter <?php echo $redTermin; ?>">
<select id="defaultSelect" name="terminselectAuto" class="alle_select select_Filter">
<option><?php echo $terminTitleB; ?></option>
<option>23. Dez. 2020</option>
<option>2. Jän. 2021</option>
<option>29. Feb. 2021</option>
<option> </option>
</select>
</div>
<script src="js/jquery-3.5.1.min.js" ></script><!--JQUERY-->
<script src="js/modernizr-custom.js" ></script><!--JQUERY-->
<script>
document.getElementById('defaultSelect').addEventListener('change', function(){
alert(this.value);
});
/*CUSTOM SELECT DROPDOWN LISTE BEGIN*/
//document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
//this.querySelector('.custom-select').classList.toggle('open');
//})
for (const option of document.querySelectorAll(".custom-option")) {
option.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
this.classList.add('selected');
this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
}
})
}
for (const dropdown of document.querySelectorAll(".custom-select-wrapper")) {
dropdown.addEventListener('click', function() {
this.querySelector('.custom-select').classList.toggle('open');
})
}
//window.addEventListener('click', function(e) {
// const select = document.querySelector('.custom-select')
// if (!select.contains(e.target)) {
// select.classList.remove('open');
// }
// });
window.addEventListener('click', function(e) {
for (const select of document.querySelectorAll('.custom-select')) {
if (!select.contains(e.target)) {
select.classList.remove('open');
}
}
});
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
</script>
</body>在选择元素中使用onchange
<div id="Select" class="custom-select selectBoxKlasse Filter">
<select onchange="alert(this.value)" id="defaultSelect" name="terminselectAuto" class="alle_select select_Filter">
<option></option>
<option>23. Dez. 2020</option>
<option>2. Jän. 2021</option>
<option>29. Feb. 2021</option>
<option> </option>
</select>
</div>