html-select 相关问题

一个HTML用户界面元素，用于从有限的选项集合中选择一个或多个选项。

我无法获取使用 asp 表单提交数据的选项。我的 TestController 中有一个值 (examDetails)，它是 Exam 对象的实例。我正在编辑... 我无法获取 <select> 选项来使用 asp 表单提交数据。我的 examDetails 中有一个值 (TestingController)，它是 Exam 对象的实例。我正在为这些考试开发一个编辑页面，该页面使用外部 API 作为单独项目的一部分来与数据库进行交互。我能够成功使用输入框从 Edit.cshtml 更改 examDetails，但是一旦我尝试使用 SelectList，提交的值始终是 null。如果我将其中一个 SelectList 字段设置为 [Required] 并选择了一个值，则当我提交表单时，该字段会显示为 null。 <form asp-page-handler="Customer" method="get"> <div class="form-group"> <label asp-for="examDetails.Type" class="control-label"></label> <select asp-for="examDetails.Type" asp-items="@FERazor.Controller.TestingController.TypeSL" name="TypeNameTest" class="form-control"> </select> <span asp-validation-for="examDetails.Type" class="text-danger"> </span> </div> <div class="form-group"> <input type="submit" value="Save" class="btn btn-default" /> </div> </form> 当我检查正在运行的 html 页面时，它实际上确实有一个值。如果我提交这个来表示 OnPost 作为参数，我确实会得到该值。 <select name="TypeNameTest" class="form-control" id="examDetails_Type"> <option selected="selected" value="Final">Final</option> <option value="Midterm">Midterm</option> <option value="No Exam">No Exam</option> <option value="Test">Test</option> </select> 我遇到了同样的问题，通过添加 asp-for 和 id html 属性解决了。

c# html-select razor-pages

回答 0 投票 0

设置选择框的选定选项

我想设置一个先前选择的选项以在页面加载时显示。我用下面的代码尝试过： $("#gate").val('网关2'); 和我想设置一个先前选择的选项以在页面加载时显示。我用以下代码尝试过： $("#gate").val('Gateway 2'); 与 <select id="gate"> <option value='null'>- choose -</option> <option value='gateway_1'>Gateway 1</option> <option value='gateway_2'>Gateway 2</option> </select> 但这不起作用。有什么想法吗？这绝对应该有效。这是一个演示。确保您已将代码放入 $(document).ready: $(function() { $("#gate").val('gateway_2'); }); $(document).ready(function() { $("#gate option[value='Gateway 2']").prop('selected', true); // you need to specify id of combo to set right combo, if more than one combo }); $('#gate').val('Gateway 2').prop('selected', true); $("#form-field").val("5").trigger("change"); 我发现使用 jQuery .val() 方法有一个明显的缺点。 <select id="gate"></select> $("#gate").val("Gateway 2"); 如果此选择框（或任何其他输入对象）位于表单中，并且表单中使用了重置按钮，则单击重置按钮时，设置值将被清除，并且不会像您期望的那样重置为起始值. 这似乎最适合我。对于选择框 <select id="gate"></select> $("#gate option[value='Gateway 2']").attr("selected", true); 用于文本输入 <input type="text" id="gate" /> $("#gate").attr("value", "your desired value") 对于文本区域输入 <textarea id="gate"></textarea> $("#gate").html("your desired value") 对于复选框 <input type="checkbox" id="gate" /> $("#gate option[value='Gateway 2']").attr("checked", true); 对于单选按钮 <input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/> $("#gate[value='this']").attr("checked", true); 这将是另一种选择： $('.id_100 option[value=val2]').prop('selected', true); 效果很好。看看这个小提琴：http://jsfiddle.net/kveAL/ 您可能需要在 $(document).ready() 处理程序中声明您的 jQuery？另外，您可能有两个具有相同 ID 的元素吗？我也有同样的问题。解决方案：添加刷新。 $("#gate").val('Gateway 2'); $("#gate").selectmenu('refresh'); 某些情况可能是 $('#gate option[value='+data.Gateway2+']').attr('selected', true); 我知道答案有多次迭代，但现在不需要 jquery 或任何其他外部库，只需使用以下内容即可轻松完成。 document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true); <select id="gate"> <option value='null'>- choose -</option> <option value='Gateway 1'>Gateway 1</option> <option value='Gateway 2'>Gateway 2</option> </select> 我知道这有一个公认的答案，但在阅读答案的回复时，我看到了一些我可以澄清的事情，这些事情可能会帮助其他遇到值更改后事件未触发问题的人。这将选择下拉列表中的值： $("#gate").val("gateway_2") 如果此选择元素使用 JQueryUI 或其他 JQuery 包装器，请使用包装器的刷新方法来更新 UI 以显示该值已被选择。下面的示例适用于 JQueryUI，但您必须查看所使用的包装器的文档以确定刷新的正确方法： $("#gate").selectmenu("refresh"); 如果存在需要触发的事件（例如更改事件），您将必须手动触发该事件，因为更改值不会触发该事件。您需要触发的事件取决于事件的创建方式：如果事件是使用 JQuery 创建的，即 $("#gate").on("change",function(){})，则使用以下方法触发事件： $("#gate").change(); 如果事件是使用标准 JavaScript 事件创建的，即使用以下方法触发事件： var JSElem = $("#gate")[0]; if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); JSElem.dispatchEvent(evt); } else { JSElem.fireEvent("onchange"); } 我的问题 get_courses(); //// To load the course list $("#course").val(course); //// Setting default value of the list 我也有同样的问题。与您的代码的唯一区别是我通过 ajax 调用加载选择框，并且执行 ajax 调用后我就设置了选择框的默认值解决方案 get_courses(); setTimeout(function() { $("#course").val(course); }, 10); $(document).ready(function() { $('#selectBoxId option[value="val2"]').prop('selected', true); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selectBoxId"> <option value="val1">Option1</option> <option value="val2">Option2</option> <option value="val3">Option3</option> </select> 我有一个类似的问题，但我没有看到提及。我有一个 ajax 调用，必须在 ajax 调用中设置它。将其设置在ajax调用下方不起作用。 var phantomName = $("#PhantomName").val(); $.ajax({ type: "GET", url: commonUrl + "/PhantomRequest/GetPhantomList", method: "GET", data: { formType: formType }, success: function (result) { if (result.isSuccess) { $("#PhantomName").empty(); $("#PhantomName").append($("<option></option>").val("-- Select Type --").text("-- Select Type --")); $.each(result.data, function () { $("#PhantomName").append($("<option></option>").val(this.name).text(this.name)); }); if (phantomName != null && phantomName != "") { console.log("phantom name is " + phantomName); $("#PhantomName").val(phantomName); } HideLoader(); } }, error: function () { console.log("GetPhantomList failed"); HideLoader(); } }); 我遇到了一个问题，由于调用之前存在语法错误，因此未设置该值。 $("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val $("#gate").val('Gateway 2'); //this line didn't work. 调用前检查语法错误。 $(function() { $("#demo").val('hello'); }); // Make option have a "selected" attribute using jQuery var yourValue = "Gateway 2"; $("#gate").find('option').each(function( i, opt ) { if( opt.value === yourValue ) $(opt).attr('selected', 'selected'); }); 除了@icksde 和@Korah（谢谢！）使用 AJAX 构建 options 时，可能会在构建列表之前触发 document.ready，因此这可能会提供一些见解。超时确实有效，但正如 @icksde 所说，它很脆弱。最好将其放入 AJAX 函数中，如下所示： $("#someObject").change(function() { $.get("website/page.php", {parameters}, function(data) { $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>"); $("#gate").val('Gateway 2'); }, "json"); });

jquery html jquery-selectors html-select

回答 0 投票 0

使用 Python Selenium 从下拉菜单中获取当前 <select> 值

我正在 Selenium Python 的网页上的下拉字段中检查所选值。我想打印出所选值是什么。我从下拉列表中获取所有值...

python python-3.x selenium selenium-webdriver html-select

回答 3 投票 0

如何动态检索HTML标签及其子标签的内容文本？

我想知道如何动态检索HTML标签及其子标签的内容文本？这是我的 HTML 代码，例如： C:\ 我想知道如何动态检索 HTML 标签及其子标签的内容文本？这是我的 HTML 代码，例如： <p><code>C:\<select> <option value="test1\">test1\</option> <option value="test2\">test2\</option> </select>test3\<select> <option value="test4\">test4\</option> <option value="test5\">test5\</option> </select>test6\<select> <option value="test7\">test7\</option> <option value="test8\">test8\</option> <option value="test9\">test9\</option> </select>test10.txt</code></p> 我想在这段代码之后创建一个按钮，当单击它时，我想直接在控制台中写入内容。例如： C:\test2\test3\test4\test6\test8\test10.txt 或 C:\test1\test3\test5\test6\test9\test10.txt ... 另一段代码可能只包含 1 或 2 个 <select> 标签。因此，我不想要只适用于 3 个 <select> 标签的代码，如前面的示例所示。提前非常感谢您这取决于您使用的编程语言以及您想要在哪里执行此操作，例如前端、网站服务器、数据库……您是否想重新发明网络爬虫？

javascript html dom html-select innerhtml

回答 0 投票 0

是否可以使用JS打开一个HTML select来显示其选项列表？ [重复]

是否可以使用JavaScript打开HTML选择来显示其选项列表？

javascript html-select

回答 10 投票 0

Django：带有 onchange 操作的 Html 选择（不使用表单）和纯 Javascript：使用代码 200 重定向，但页面未加载

我的模板中有一个选择框，它通过 onchange 函数对更改做出反应，该函数将所选值发送到 Django 视图。视图从数据库中获取所需的数据，并且应该...

javascript django html-select

回答 1 投票 0

寻找如何在 Selenium 中使用 `element_selection_state_to_be()` 的示例

想要使用 Selenium 中的预期条件来等待选择下拉列表中的选项。可以使用的方法之一是 element_ located_selection_state_to_be(locator, isSelected)

selenium-webdriver html-select expected-condition

回答 1 投票 0

如何用php预选html下拉列表？ [重复]

我正在尝试使用 PHP 选择选项，但我没有主意了！下面是我到目前为止尝试过的代码：是的我正在尝试使用 PHP 选择选项，但我没有主意了！下面是我到目前为止尝试过的代码： <select> <option value="1">Yes</options> <option value="2">No</options> <option value="3">Fine</options> </select> <input type="text" value="" name="name"> <input type="submit" value="go" name="go"> 那么，我该怎么办？程序员很懒……呃……高效……我会这样做： <?php // This part of the code should be outside of your view e.g. in a Controller or so. $options = [ 1 => 'Yes', 2 => 'No', 3 => 'Fine', ]; $selected = 1; ?>  <select> <?php foreach ($options as $key => $text) { ?> <option value="<?= $key ?>" <?= $key === $selected ? 'selected' : '' ?>><?= $text ?></option> <?php } ?> </select> <input type="text" name="name"/> <input type="submit" value="Go"/> <select> <option value="1" <?php if ($myVar==1) echo 'selected="selected"';?>>Yes</options> <option value="2" <?php if ($myVar==2) echo 'selected="selected"';?>>No</options> <option value="3" <?php if ($myVar==3) echo 'selected="selected"';?>>Fine</options> </select> <input type="text" value="" name="name"> <input type="submit" value="go" name="go"> 如果我正确理解你的问题，这是一种非常简单直接的方法。你可以用这个.. <select name="select_name"> <option value="1"<?php echo(isset($_POST['select_name'])&&($_POST['select_name']=='1')?' selected="selected"':'');?>>Yes</option> <option value="2"<?php echo(isset($_POST['select_name'])&&($_POST['select_name']=='2')?' selected="selected"':'');?>>No</option> <option value="3"<?php echo(isset($_POST['select_name'])&&($_POST['select_name']=='3')?' selected="selected"':'');?>>Fine</option> </select> 首先为您的选择命名。然后做： <select name="my_select"> <option value="1" <?= ($_POST['my_select'] == "1")? "selected":"";?>>Yes</options> <option value="2" <?= ($_POST['my_select'] == "2")? "selected":"";?>>No</options> <option value="3" <?= ($_POST['my_select'] == "3")? "selected":"";?>>Fine</options> </select> 它的作用是检查每个选择的内容是否相同，以及何时发现回显“已选择”。我想您正在使用数组来创建 select 表单输入。在这种情况下，请使用数组： <?php $selected = array( $_REQUEST['yesnofine'] => 'selected="selected"' ); $fields = array(1 => 'Yes', 2 => 'No', 3 => 'Fine'); ?> <select name=‘yesnofine'> <?php foreach ($fields as $k => $v): ?> <option value="<?php echo $k;?>" <?php @print($selected[$k]);?>><?php echo $v;?></options> <?php endforeach; ?> </select> 如果没有，您可以展开上面的循环，并仍然使用数组。 <option value="1" <?php @print($selected[$k]);?>>Yes</options> <option value="2" <?php @print($selected[$k]);?>>No</options> <option value="3" <?php @print($selected[$k]);?>>Fine</options> 注意到我不知道：你如何命名你的输入，所以我为它起了一个名字。您在服务器端处理表单输入的方式，我使用了$_REQUEST，您必须调整代码以匹配您正在使用的框架的要求（如果有）。此外，在许多框架中习惯于在视图专用脚本中使用替代语法。我使用内联 if ($_POST['category'] == $data['id'] ? 'selected="selected"' : false) 我有 2 个 php 文件，我做了这个，它可以工作。（这是一个示例）第一个代码来自一个文件，第二个代码来自两个文件。 <form action="two.php" method="post"> <input type="submit" class="button" value="submit" name="one"/> <select name="numbers"> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> </select> </form> if(isset ($_POST['one'])) { if($_POST['numbers']=='1') { $a='1' ; } else if($_POST['numbers']=='2') { $a='2' ; { else if ($_POST['numbers']=='3') { $a='3' ; } } 此答案与特定接收者无关，但可能对其他人有用。我在通过数据库返回的值“选择”正确的“选项”时遇到了类似的问题。我通过添加带有应用显示的附加标签解决了这个问题：无。 <?php $status = "NOT_ON_LIST"; $text = "<html> <head> </head> <body> <select id=\"statuses\"> <option value=\"status\" selected=\"selected\" style=\"display:none\">$status</option> <option value=\"status\">OK</option> <option value=\"status\">DOWN</option> <option value=\"status\">UNKNOWN</option> </select> </body> </html>"; print $text; ?> 这是我想出的解决方案： <form name = "form1" id = "form1" action = "#" method = "post"> <select name = "DropDownList1" id = "DropDownList1"> <?php $arr = array('Yes', 'No', 'Fine' ); // create array so looping is easier for( $i = 1; $i <= 3; $i++ ) // loop starts at first value and ends at last value { $selected = ''; // keep selected at nothing if( isset( $_POST['go'] ) ) // check if form was submitted { if( $_POST['DropDownList1'] == $i ) // if the value of the dropdownlist is equal to the looped variable { $selected = 'selected = "selected"'; // if is equal, set selected = "selected" } } // note: if value is not equal, selected stays defaulted to nothing as explained earlier echo '<option value = "' . $i . '"' . $selected . '>' . $arr[$i] . '</option>'; // echo the option element to the page using the $selected variable } ?> </select>  <input type="text" value="" name="name"> <input type="submit" value="go" name="go"> </form> 只要这些值是按某种数字顺序（升序或降序）的整数，我的代码就可以工作。它的作用是在 html 中启动下拉列表，并在 php 代码中添加每个选项元素。但如果您有随机值，即：1、4、2、7、6，则它将不起作用。每个值必须是唯一的。

php select drop-down-menu return html-select

回答 0 投票 0

带有隐藏类的 python selenium 选择下拉列表

我是使用python3和selenium的初学者，并尝试单击下拉选项中的特定值。我尝试使用 select 和 actionchains、execute_script 与 js、xpath、css...等，但它不能...

python selenium-webdriver select html-select hidden

回答 2 投票 0

从单个选定选项提交多个值[重复]

我有一个下拉菜单来显示搜索的价格范围。下拉菜单的 HTML：全部（-） 400 卢比至 1,000 卢比 (3) 我有一个下拉菜单来显示搜索的价格范围。下拉菜单的 HTML： <select name="price"> <option>All (-)</option> <option>Rs.400 to Rs.1,000 (3)</option> <option>Rs.1,000 to Rs.2,000 (6)</option> <option>Rs.2,000 to Rs.4,000 (1)</option> <option>Rs.4,000+ (1)</option> </select> 使用这个 option 值，现在我需要将第一和第二价格与用户选择分开。例如。如果有人选择 Rs.400 to Rs.1,000 (3)，那么我需要获得 400 和 1,000。谁能告诉我如何在 php.ini 中做到这一点？我厌倦了 php explode。但我无法正确地弄清楚这一点。这样的事情怎么样： HTML <select name="price"> <option value="all">All (-)</option> <option value="400|1000">Rs.400 to Rs.1,000 (3)</option> <option value="1000|2000">Rs.1,000 to Rs.2,000 (6)</option> <option value="2000|4000">Rs.2,000 to Rs.4,000 (1)</option> <option value="Over">Rs.4,000+ (1)</option> </select> PHP <?php //Get the data from the form $price = $_POST['price']; $prices = explode("|", $price); ?> 例如，如果用户选择“Rs.400 to Rs.1,000”，则 $prices 的值为： $price[0] = "400"; $price[1] = "1000"; 我希望有帮助。如果没有，我想我不清楚你在问什么。受到之前答案的启发。我建议。 HTML <select name="price"> <option value="|">All (-)</option> <option value="400|1000">Rs.400 to Rs.1,000 (3)</option> <option value="1000|2000">Rs.1,000 to Rs.2,000 (6)</option> <option value="2000|4000">Rs.2,000 to Rs.4,000 (1)</option> <option value="4000|">Rs.4,000+ (1)</option> </select> PHP <?php function get_numeric($val) { if (is_numeric($val)) { return $val + 0; } return false; } $price_selected = isset($_REQUEST['price']) && trim($_REQUEST['price'])!="" ? $_REQUEST['price'] : "|"; // sets a default value list($lower, $upper) = array_map('get_numeric',explode('|', $price_selected, 2)); var_dump($lower); // false when there's no lower limit var_dump($upper); // false when there's no upper limit ?>

php split html-select delimited

回答 0 投票 0

如何限制 HTML <select> 元素中选择的选项数量？

我在制作的表单中使用了元素，允许进行多项选择，但我想将最大选择数量限制为 10。使用 JavaScript 或 jQuery 可以吗？我正在制作的表单中使用 <select> 元素，允许进行多项选择，但我想将最大选择数量限制为 10。使用 JavaScript 或 jQuery 可以吗？这里有一些完整的代码供您使用...一定喜欢 Google AJAX API Playground :-) 编辑1：注意：这只能让你选择5个，因为我不想复制/粘贴另外10个选项:-)  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Sample Select Maximum with jQuery</title> <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"> </script> <script type="text/javascript"> google.load("jquery", "1"); $(document).ready(function() { var last_valid_selection = null; $('#testbox').change(function(event) { if ($(this).val().length > 5) { alert('You can only choose 5!'); $(this).val(last_valid_selection); } else { last_valid_selection = $(this).val(); } }); }); </script> </head> <body style="font-family: Arial;border: 0 none;"> <select multiple id='testbox'> <option value='1'>First Option</option> <option value='2'>Second Option</option> <option value='3'>Third Option</option> <option value='4'>Fourth Option</option> <option value='5'>Fifth Option</option> <option value='6'>Sixth Option</option> <option value='7'>Seventh Option</option> <option value='8'>Eighth Option</option> <option value='9'>Ninth Option</option> <option value='10'>Tenth Option</option> </select> </body> </html> 演示这会将用户限制为 3 个选项： $("select").on("click", "option", function () { if ( 3 <= $(this).siblings(":selected").length ) { $(this).removeAttr("selected"); } }); 小提琴：http://jsfiddle.net/2GrYk/ 这个答案适用于这些情况：正常点击仅 mousedown（鼠标在 mouseup 之前移出）键盘如果有相同值的不同选项代码： $('#mySelect').on('change', function() { if (this.selectedOptions.length < 4) { $(this).find(':selected').addClass('selected'); $(this).find(':not(:selected)').removeClass('selected'); }else $(this) .find(':selected:not(.selected)') .prop('selected', false); }); 演示或者，对于不支持selectedOptions的旧浏览器， $('#mySelect').on('change', function() { var $sel = $(this).find(':selected'); if ($sel.length < 4) { $sel.addClass('selected'); $(this).find(':not(:selected)').removeClass('selected'); }else $(this) .find(':selected:not(.selected)') .prop('selected', false); }); 演示使用 jQuery，您可以将一个函数附加到更改事件，并且由于它是多重选择，因此 val() 将是一个数组。您始终可以检查数组的长度，如果其大小是预定义的，则执行某些操作。以下代码演示了如何知道选择了多少个项目。 $("#select").change(function(){ alert($(this).val().length); }); 想通了！这是生成的代码： $(document).ready(function(){ var last_valid_selection = null; var selected = ""; $("#recipient_userid").change(function(event){ if ($(this).val().length > 10) { alert('You can only choose 10!'); $(this).val(last_valid_selection); } else { last_valid_selection = $("#recipient_userid").val(); $("#recipient_userid option:selected").each(function () { selected += "<li>" + $(this).text() + "</li>"; }); $("#currentlySelected").html(selected); selected = ""; } }).change(); }); 感谢大家的帮助！我基本上合并了几个提供的答案，以制作特定于特定 ID 的内容： $("#mySelect").on("click", "option", function(){ var max = 3; if ( max <= $(this).siblings(":selected").length ) { alert("Only " + max + " selections allowed."); $(this).removeAttr("selected"); } }); 罗布你可以使用jQuery $("select").change(function () { if($("select option:selected").length > 3) { //your code here } }); 瞧！无需 Jquery。 var is = 0; for (var i = 0; i < selectCountryCode.length; i++) { if (selectCountryCode.options[i].selected) { is++; } if (is > 3) { selectCountryCode.options[i].selected = false; } } 吉路山这是一个纯粹的 JavaScript 示例，基于 jilu 的示例。 const selectEls = document.querySelectorAll('select[multiple]'); selectEls.forEach((selectEl) => { selectEl.addEventListener('change', (e) => { const currentEl = e.currentTarget; let is = 0; for (let i = 0; i < currentEl.length; i++) { if (currentEl.options[i].selected) { is++; } if (is > 3) { // if you want more than 3 selected options, change the number here currentEl.options[i].selected = false; } } }) });

javascript html jquery html-select

回答 0 投票 0

如何在html select中设置选项文本的span标签样式

堆栈闪电战我有一个场景，我的 HTML 选择的第一个选项包含一个星号，该星号应该是红色的。但是我无法设置星号的样式，它总是出现在...

html html-select

回答 1 投票 0

Joomla JForm 带外键、Ajax 和 jQuery 的链式选择

我想知道如何将链式选择列表集成到组件的管理员编辑视图中。我有 2 个表：制造商和型号两个表都使用列 id 和

php jquery ajax joomla html-select

回答 2 投票 0

引导程序可搜索选择选项

当我使用引导选择时，选择选项不起作用。 $(函数() { $('.selectpicker').selectpicker(); }); .sc_表{ 高度：100vh；溢出：滚动； } 当我使用引导选择时，选择选项不起作用。 $(function() { $('.selectpicker').selectpicker(); }); .sc_table { height: 100vh; overflow: scroll; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> <body> <div> <center> <h2>Transaction Creation</h2> </center> </div> <div class="container-fluid p-2 sc_table b-5"> <form action="" method="post"> <div class="mb-3"> <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label> <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true"> <option data-tokens="dummy" value="0" selected>Select Account</option> <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option> <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option> <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option> <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option> <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option> <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option> </select> </div> <button type="submit" name="tran_submit" class="btn btn-primary">Submit</button> </form> </div> </body> 您遇到的 bootstrap-select 无法正常工作的问题可能是由于 Bootstrap 5 的兼容性问题。您使用的 bootstrap-select 版本可能与 Bootstrap 5 不完全兼容。要解决此问题，您可以尝试使用与 Bootstrap 5 兼容的 bootstrap-select 版本，例如版本 1.14.0-beta2 或 later。 $(function() { $('.selectpicker').selectpicker(); }); .sc_table { height: 100vh; overflow: scroll; }  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet">  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script> <body> <div> <center> <h2>Transaction Creation</h2> </center> </div> <div class="container-fluid p-2 sc_table b-5"> <form action="" method="post"> <div class="mb-3"> <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label> <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true"> <option data-tokens="dummy" value="0" selected>Select Account</option> <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option> <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option> <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option> <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option> <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option> <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option> </select> </div> <button type="submit" name="tran_submit" class="btn btn-primary">Submit</button> </form> </div> </body>

html twitter-bootstrap bootstrap-5 html-select

回答 1 投票 0

如何使用 jQuery 更改 <select> 的选项？

假设有可用的选项列表，如何用新的更新？假设有可用的选项列表，如何用新的 <select> 更新 <option>？您可以使用 empty 方法删除现有选项，然后添加新选项： var option = $('<option></option>').attr("value", "option value").text("Text"); $("#selectId").empty().append(option); 如果您在对象中有新选项，您可以： var newOptions = {"Option 1": "value1", "Option 2": "value2", "Option 3": "value3" }; var $el = $("#selectId"); $el.empty(); // remove old options $.each(newOptions, function(key,value) { $el.append($("<option></option>") .attr("value", value).text(key)); }); 编辑：要删除除第一个之外的所有选项，您可以使用:gt选择器来获取索引大于零的所有option元素和remove它们： $('#selectId option:gt(0)').remove(); // remove all options, but not the first 我将 CMS 的出色答案放入快速 jQuery 扩展中： (function($, window) { $.fn.replaceOptions = function(options) { var self, $option; this.empty(); self = this; $.each(options, function(index, option) { $option = $("<option></option>") .attr("value", option.value) .text(option.text); self.append($option); }); }; })(jQuery, window); 它需要一个包含“text”和“value”键的对象数组。所以用法如下： var options = [ {text: "one", value: 1}, {text: "two", value: 2} ]; $("#foo").replaceOptions(options); $('#comboBx').append($("<option></option>").attr("value",key).text(value)); 其中comboBx是您的组合框ID。或者您可以将选项作为字符串附加到已经存在的innerHTML，然后分配给选择的innerHTML。编辑如果您需要保留第一个选项并删除所有其他选项，那么您可以使用 var firstOption = $("#cmb1 option:first-child"); $("#cmb1").empty().append(firstOption); 由于某些奇怪的原因这部分 $el.empty(); // remove old options 来自 CMS 的解决方案对我来说不起作用，所以我只是简单地使用了这个 el.html(' '); 这是有效的。所以我的工作代码现在看起来像这样： var newOptions = { "Option 1":"option-1", "Option 2":"option-2" }; var $el = $('.selectClass'); $el.html(' '); $.each(newOptions, function(key, value) { $el.append($("<option></option>") .attr("value", value).text(key)); }); 删除和添加 DOM 元素比修改现有元素慢。如果你的选项集具有相同的长度，你可以这样做： $('#my-select option') .each(function(index) { $(this).text('someNewText').val('someNewValue'); }); 如果您的新选项集具有不同的长度，您可以使用上述某些技术删除/添加您真正需要的空选项。这有帮助吗？ $("#SelectName option[value='theValueOfOption']")[0].selected = true; 如果我们不断更新<select>并且我们需要保存以前的值: var newOptions = { 'Option 1':'value-1', 'Option 2':'value-2' }; var $el = $('#select'); var prevValue = $el.val(); $el.empty(); $.each(newOptions, function(key, value) { $el.append($('<option></option>').attr('value', value).text(key)); if (value === prevValue){ $el.val(value); } }); $el.trigger('change'); 传统的手工做事方式一直对我有好处。清除选择并保留第一个选项： $('#your_select_id').find('option').remove() .end().append('<option value="0">Selec...</option>') .val('whatever'); 如果您的数据来自 Json 或其他任何形式（只需 Concat 数据）： var JSONObject = JSON.parse(data); newOptionsSelect = ''; for (var key in JSONObject) { if (JSONObject.hasOwnProperty(key)) { var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>'; } } $('#your_select_id').append( newOptionsSelect ); 我的 Json 对象： [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}] 此解决方案非常适合使用 Ajax，并从数据库中以 Json 形式给出答案。例如，如果您的 html 代码包含以下代码： <select id="selectId"><option>Test1</option><option>Test2</option></select> 为了更改选择中的选项列表，您可以使用以下代码。当您的名字选择名为 selectId 时。 var option = $('<option></option>').attr("value", "option value").text("Text"); $("#selectId").html(option); 在上面的示例中，我仅通过一个新选项更改了旧的选项列表。大多数方法都是从删除所有现有选项并重新填充下拉列表开始的。但是，我更喜欢添加和删除单个选项，以避免更改当前选择（如果有）。 <option></option> <option value="12151d81-fe94-4007-8f1f-907aa8129d0a" data-text="Scrambled Eggs">Scrambled Eggs</option> 此示例假设选项 HTML 的结构如上。 options 是如下 JSON 数据： { "guid": "bf42ba25-02b3-4d49-b4cf-02467c4fc44d", "value": "Granola" }, { "guid": "89004730-bb92-4cd6-986a-28e228a94d54", "value": "Yogurt" } field 是输入对象。 function update_options(field, options) { // If item doesn't exist in dropdown, add it. $.each(options, function (index, item) { if (field.find(`option[value="${item.guid}"]`).length == 0) { $(`<option value="${item.guid}" data-text="${item.value}">${item.value}<\/option>`).appendTo(field); } }); // If item in dropdown doesn't exist in data, remove it. $.each(field.find('option'), function (index, item) { if (options.find(x => x.guid == item.value) == undefined) { field.find(`option[value="${item.value}"]`).remove(); } }); } 如果您有选项值/标签的数组或对象，则迭代每个选项并单独使用 .append() 的替代方法是映射到数组并调用 .append() 一次 const optionsArray = [ { value: 1, text: 'One' }, { value: 2, text: 'Two' }, ]; $('#array') .empty() .append( optionsArray.map(({ value, text }) => $('<option>', { value, text })), ); const optionsObject = { Three: 3, Four: 4, }; $('#object') .empty() .append( Object.entries(optionsObject).map(([text, value]) => $('<option>', { value, text }), ), ); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js"></script> <p> <select id="array"> <option>Remove me</option> </select> </p> <p> <select id="object"> <option>Remove me</option> </select> </p>

jquery html-select

回答 0 投票 0

我们如何调整 Chakra 选择选项宽度？

基本上我想调整脉轮选择框选项的大小。我发现这是元素中的老虎机徽章。我尝试过多种选择。但没有一个有效首先我尝试使用基本的 CSS 属性， ...

html css reactjs html-select chakra

回答 1 投票 0

如何使联系表 7 中的“请选择...”不可选择？（已回答）

如何使下拉菜单中的“请选择...”选项不可选择？我正在这个表单测试器中为联系表单 7 条件字段进行编码。这是我的 c...

html forms drop-down-menu html-select contact-form-7

回答 1 投票 0

如何使联系表 7 中的“请选择...”不可选择？（first_as_label 不起作用）

如何使下拉菜单中的“请选择...”选项不可选择？我正在这个表单测试器中为联系表单 7 条件字段进行编码。这是我的 c...