[英]How can i get the value of the selected option using Javascript or Jquery?
我创建了一个自定义选择框，我想获取所选标签的值，当我单击“检查”按钮时，我收到一条警报，说显示了 div 内的代码，这似乎合乎逻辑，问题是我怎样才能得到所选选项的值或文本。
.selectbox_newpost { padding:0; margin:0; height:100vh; width:100vw; font-family: sans-serif; color:#FFF; } .selectbox_newpost { display:flex; flex-direction: column; position:relative; width:250px; height:40px; } .option_newpost { padding:0 30px 0 10px; min-height:40px; display:flex; align-items:center; background:#333; border-top:#222 solid 1px; position:absolute; top:0; width: 100%; pointer-events:none; order:2; z-index:1; transition:background .4s ease-in-out; box-sizing:border-box; overflow:hidden; white-space:nowrap; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="stylesss.css"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <meta charset="utf-8"> <title>test</title> </head> <body> <script type="text/javascript"> function clicked(){ var option = document.getElementById("selectedOptionNewpost"); alert(option.innerHTML); } </script> <div class="selectbox_container_newpost"> <div id="selectedOptionNewpost" class="selectbox_newpost" tabindex="1"> <input class="selectopt" name="test" type="radio" id="opt1" checked> <label for="opt1" class="option_newpost">Objects</label> <input class="selectopt" name="test" type="radio" id="opt2"> <label for="opt2" class="option_newpost">Vehicules</label> <input class="selectopt" name="test" type="radio" id="opt3"> <label for="opt3" class="option_newpost">Technology</label> <input class="selectopt" name="test" type="radio" id="opt4"> <label for="opt4" class="option_newpost">Books</label> <input class="selectopt" name="test" type="radio" id="opt5"> <label for="opt5" class="option_newpost">Furniture</label> <input class="selectopt" name="test" type="radio" id="opt6"> <label for="opt6" class="option_newpost">Others...</label> </div> </div> <button onclick="clicked()">Check</button> </body> </html>
您可以找到选定的单选按钮，然后找到与其关联的标签并打印出 textContent。
检查下面
如果这就是您要找的，请告诉我。
.selectbox_newpost { padding:0; margin:0; height:100vh; width:100vw; font-family: sans-serif; color:#FFF; } .selectbox_newpost { display:flex; flex-direction: column; position:relative; width:250px; height:40px; } .option_newpost { padding:0 30px 0 10px; min-height:40px; display:flex; align-items:center; background:#333; border-top:#222 solid 1px; position:absolute; top:0; width: 100%; pointer-events:none; order:2; z-index:1; transition:background .4s ease-in-out; box-sizing:border-box; overflow:hidden; white-space:nowrap; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="stylesss.css"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <meta charset="utf-8"> <title>test</title> </head> <body> <script type="text/javascript"> function clicked(){ var option = document.getElementById("selectedOptionNewpost"); const radioSelected = option.querySelector("input[type='radio']:checked") const labelForSelectedRadio = option.querySelector(`label[for=${radioSelected.getAttribute('id')}]`) console.log(labelForSelectedRadio.textContent) } </script> <div class="selectbox_container_newpost"> <div id="selectedOptionNewpost" class="selectbox_newpost" tabindex="1"> <input class="selectopt" name="test" type="radio" id="opt1" checked> <label for="opt1" class="option_newpost">Objects</label> <input class="selectopt" name="test" type="radio" id="opt2"> <label for="opt2" class="option_newpost">Vehicules</label> <input class="selectopt" name="test" type="radio" id="opt3"> <label for="opt3" class="option_newpost">Technology</label> <input class="selectopt" name="test" type="radio" id="opt4"> <label for="opt4" class="option_newpost">Books</label> <input class="selectopt" name="test" type="radio" id="opt5"> <label for="opt5" class="option_newpost">Furniture</label> <input class="selectopt" name="test" type="radio" id="opt6"> <label for="opt6" class="option_newpost">Others...</label> </div> </div> <button onclick="clicked()">Check</button> </body> </html>
或者如果您使用 JQuery：
function clicked(){
alert($("input[type=radio][name=test]:checked").attr('id'));
alert($("input[type=radio][name=test]:checked").attr('value'));
}
但是您必须为单选按钮添加一个 value 属性：
<input class="selectopt" name="test" type="radio" id="opt4" value="4">
如何使用 JavaScript\\JQuery 使用选择标记的选定选项的值设置隐藏输入标记的值？
[英]How can I set the value of an hidden input tag with the value of the selected option of a select tag using JavaScript\JQuery?
如何获取所选选项的值（如显示值而非值=“”）
[英]How can i get the value (as in displayed value not value=“”) of selected option
如何使用 PHP 或 Jquery 从动态创建的下拉列表中获取所选选项的 ID？
[英]how I can get the ID of the selected option from a dynamically created dropdown using PHP, or Jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.