问题描述
我有一个带有自定义选择下拉列表的表单。不知道如何将选择的内容从选择中获取到警报框中。
我试过了：
<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,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,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>正如你在我的 cody 中看到的，我不是 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*/
´´´
解决方法
我建议使用事件侦听器而不是内联 onclick()
为具有 id 的元素创建一个事件监听器选择元素，监听更改事件然后读出属性 .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,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,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>