html-select 相关问题

ASP.NET Core 9 MVC 中的类别下拉过滤器

任何人都可以帮助我使用此类别过滤器吗？ 类别 ... 任何人都可以帮助我使用此类别过滤器吗？ <div class="d-flex align-items-center"> <label for="category-select" class="me-2">Category</label> <select name="categoryFilter" class="form-select" id="category-select"> <option value="">All Categories</option> @foreach (var category in Model.Categories) { var isSelected = Model.CategoryFilter == category.Value ? "selected" : ""; <option value="@category.Value" selected="" @isSelected>@category.Text</option> } </select> </div> 我收到此错误： 错误（活动）RZ1031 标签助手“选项”在元素的属性声明区域中不得包含 C#。 C:\Users\zaida\Desktop\Clinic Management Software\ClinicManagementSystem\Views\ProductManagement\Index.cshtml 55 控制器： [HttpGet] public async Task<IActionResult> Index(string searchTerm, string categoryFilter, string sortBy, int page = 1) { var productsQuery = _context.Products .Include(p => p.Category) .Include(p => p.Inventory) .Where(p => p.DeletedAt == null); // Filtering if (!string.IsNullOrEmpty(searchTerm)) productsQuery = productsQuery.Where(p => p.Name.Contains(searchTerm) || p.SKU.Contains(searchTerm)); if (!string.IsNullOrEmpty(categoryFilter)) productsQuery = productsQuery.Where(p => p.Category.Name == categoryFilter); // Sorting productsQuery = sortBy switch { "price_asc" => productsQuery.OrderBy(p => p.Price), "price_desc" => productsQuery.OrderByDescending(p => p.Price), "name_asc" => productsQuery.OrderBy(p => p.Name), "name_desc" => productsQuery.OrderByDescending(p => p.Name), _ => productsQuery.OrderBy(p => p.CreatedAt) }; // Pagination var totalItems = await productsQuery.CountAsync(); var products = await productsQuery .Skip((page - 1) * PageSize) .Take(PageSize) .ToListAsync(); var categories = await _context.Product_Category .Select(c => new SelectListItem { Text = c.Name, Value = c.Name }) .ToListAsync(); var viewModel = new ProductIndexViewModel { Products = products, CurrentPage = page, TotalPages = (int)Math.Ceiling((double)totalItems / PageSize), SearchTerm = searchTerm, CategoryFilter = categoryFilter, SortBy = sortBy, Categories = categories }; return View(viewModel); } [HttpPost] public async Task<IActionResult> IndexPost(string searchTerm, string categoryFilter, string sortBy, int page = 1) { return await Index(searchTerm, categoryFilter, sortBy, page); } [HttpGet] public async Task<IActionResult> AddProduct() { ViewBag.Categories = await _context.Product_Category.ToListAsync(); ViewBag.Discounts = await _context.Product_Discount.ToListAsync(); return View(); } 我试过了 <option value="">All Categories</option> @foreach (var category in Model.Categories) { var isSelected = Model.CategoryFilter == category.Value ? "selected" : ""; <option value="@category.Value" selected="@isSelected" >@category.Text</option> } 但我必须进入搜索栏并按 Enter 才能使其工作 错误（活动）RZ1031 标签助手“选项”中不得包含 C# 元素的属性声明区域。 这个问题，你好像找到原因了（<option value="@category.Value" selected="" @isSelected>），问题涉及到selected属性，你需要把@isSelected放在""里面，修改后代码应该是这样的 <option value="@category.Value" selected="@isSelected">。 根据您的代码，似乎您想为 select 标签设置默认值，使用您的代码，您会发现它没有设置正确的默认值。如果使用F12开发者工具查看元素，可以看到每个选项都有selected属性，并且会选择最后一个选项作为默认值。 要解决这个问题，您可以修改代码如下：使用 asp-for 和 asp-item 绑定选择标签并设置默认值。 <select asp-for="CategoryFilter" name="categoryFilter" class="form-select" id="category-select" asp-items="Model.Categories"> <option value="">All Categories</option> </select> 输出如下： 但我必须进入搜索栏并按 Enter 才能使其工作 您的意思是要在更改所选选项后过滤数据吗？如果是这样，您可以使用 select 元素更改事件来提交表单。 尝试使用以下代码： Index.cshtml：在form标签中，我们可以使用method属性来指定表单如何提交（get或post），并使用asp-action属性来指定将提交到哪个action方法。 @model Net9MVCSample.Models.ProductIndexViewModel @{ ViewData["Title"] = "Home Page"; } <form id="myform" asp-action="Index" method="get"> <div class="d-flex align-items-center"> <label for="category-select" class="me-2">Category</label> <select asp-for="CategoryFilter" name="categoryFilter" class="form-select" id="category-select" onchange="Submitform()" asp-items="Model.Categories"> <option value="">All Categories</option> </select> </div> <div> Output: @ViewData["selectvalue"] </div> </form> @section Scripts { <script> function Submitform(){ document.getElementById("myform").submit(); } </script> } 家庭控制器： public class HomeController : Controller { private readonly ILogger<HomeController> _logger; public HomeController(ILogger<HomeController> logger) { _logger = logger; } [HttpGet] public async Task<IActionResult> Index(string searchTerm, string categoryFilter, string sortBy, int page = 1) { var categories = new List<SelectListItem>() { new SelectListItem { Text = "C1", Value="101" }, new SelectListItem { Text = "C2", Value="102" }, new SelectListItem { Text = "C3", Value="103" }, new SelectListItem { Text = "C4", Value="104" }, new SelectListItem { Text = "C5", Value="105" }, }; categoryFilter = categoryFilter ?? "103"; var viewModel = new ProductIndexViewModel { CategoryFilter = categoryFilter, Categories = categories }; ViewData["selectvalue"] = categoryFilter; return View(viewModel); } 型号： public class ProductIndexViewModel { public string CategoryFilter { get; set; } public List<SelectListItem> Categories { get; set; } } 更多详细信息，请参阅 ASP.NET Core 中表单中的标记帮助程序。 结果如下：更改所选选项后，会将表单提交给 Index action 方法，然后将过滤后的数据返回到页面。

如何为 html select 中的箭头添加填充？

我想在 HTML 选择中的箭头右侧添加填充 目前的样子。 我不想改变箭头的外观。只需要在右侧填充即可。 这...

允许选择和输入复选框可编辑

我正在开发的 HTML 模板包含各种 HTML 选择和复选框元素。 例如。 不... 我正在开发的 HTML 模板包含各种 HTML 选择和复选框元素。 例如。 <select> <option></option> <option>No</option> <option>Yes</option> </select> <input type="checkbox" /> 我发现这些元素似乎无法在所见即所得编辑器中进行编辑。 我希望用户能够在所见即所得编辑器中切换复选框并从这些元素中选择选项。 所以 HTML 可以变成这样： <select> <option></option> <option selected>No</option> <option>Yes</option> </select> <input type="checkbox" checked /> 有人能够在 TinyMCE 4 中实现这一目标吗？ 是否有我尚未找到的可以提供帮助的插件？作为插件来实现这一点是否存在技术挑战？ 感谢您的帮助/建议！ 更新： 我发现无法在编辑器中更改这些元素实际上是自 2008 年以来 Firefox 的一个报告的错误！在其他浏览器中，您可以更改这些元素的值 - 然而，由于没有对 HTML 进行任何更改 - 它们的状态不会保存。 也许在保存之前将这些元素的状态记录到 HTML 源中的插件可以满足我的要求？ 我设法创建了这样的插件（但针对版本 5.10.9）！创建文件夹external_plugins，创建文件夹checkbox_dd（我的插件名称）并添加plugin.js，然后将其作为代码添加到其中： (function () { var checkbox_dd = (function () { 'use strict'; tinymce.PluginManager.add("checkbox_dd", function (editor, url) { function _onAction() { editor.insertContent('<input type="checkbox">'); } // Define the Toolbar button editor.ui.registry.addButton('checkbox_dd', { tooltip: "Insert Checkbox", icon: 'checkmark', // Use a built-in icon or specify your own onAction: _onAction }); // Function to handle checkbox changes function updateCheckboxState(e) { if (e.target.nodeName === 'INPUT' && e.target.type === 'checkbox') { if (e.target.checked) { e.target.setAttribute('checked', ''); } else { e.target.removeAttribute('checked'); } } } // Add event listener to the editor body editor.on('init', function () { var body = editor.getBody(); body.addEventListener('change', updateCheckboxState); }); // Clean up event listener when editor is removed editor.on('remove', function () { var body = editor.getBody(); if (body) { body.removeEventListener('change', updateCheckboxState); } }); return { getMetadata: function () { return { name: "Checkbox Plugin for TinyMCE", url: "https://www.dejandozet.com/blog/tinymce-checkbox-plugin" }; } }; }); }()); })(); 然后在init中 tinymce.init({ ... external_plugins: { 'checkbox_dd':'/tinymce/external_plugins/checkbox_dd/plugin.js' }, toolbar: 'checkbox_dd |...', init_instance_callback: function (editor) { editor.getBody().addEventListener('click', function (e) { if (e.target.tagName === 'INPUT' && e.target.type === 'checkbox') { e.stopPropagation(); } }); }, content_style: 'input[type="checkbox"] { pointer-events: auto; }' }); 它成功了！我的目标是使用 TinyMCE 编辑器作为清单。

如何为选择下拉菜单中的默认箭头添加填充？

我正在尝试遵循带有填充的下拉菜单的设计：0 10px 0 10px 然而，箭头根本没有被调整。它一直坚持到右端： 有没有办法... 我正在尝试遵循 <select> 下拉菜单与 padding: 0 10px 0 10px 的设计 但是，箭头根本没有被调整。它一直粘在右端： 有没有办法定位特定箭头并对其应用填充？ （旨在保持相同的填充应用于两侧的输入文本） 我使用了 border-right 属性并且它起作用了。 select { border-right: 16px solid transparent } 包装元素和“:after”的问题在于，当您单击箭头图标时，它不会切换“选择”下拉列表。 工作示例： https://jsfiddle.net/asaad7/r8sx9m7e/ 对于那些有同样问题的人，我找到了一种解决如何设置默认选择“箭头”样式的方法，即用生成的内容替换它。 第1步：隐藏默认箭头 select { -webkit-appearance: none; appearance: none; } 第 2 步：在 select 周围创建额外的包装器，因为::before/::after 不能以这种方式工作。 <div class="select-wrapper"><select id="select" name="select"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select></div> 第 3 步：应用生成的内容 .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } 以上代码源自 高级表单样式 | MDN 没有包装 div 的解决方案 <select id="birthDate.dateYear" name="birthDate.dateYear" > <option value="">Year</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> </select> CSS select { -webkit-appearance: none !important; -moz-appearance: none !important; background-color: #fafafa; height: 45px; width: 100%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC); background-position: 100%; background-repeat: no-repeat; border: 1px solid #ccc; padding: 0.5rem; border-radius: 0; } https://jsfiddle.net/aj4orwue/10/ 我认为我们不能为 <select> 标签中的默认箭头添加填充。但这是我发现的一个简单的解决方法。 隐藏默认箭头 添加箭头作为背景图像进行选择，然后将其放置在您想要的位置 隐藏箭头： /* Removing the default arrow */ select { -webkit-appearance: none; appearance: none; } 添加自定义箭头： /* Custom arrow */ select { background-image: url("/images/icons/caret-down-light.svg"); background-size: 24px; background-repeat: no-repeat; background-position: calc(100% - 8px) center; } 结果会是这样的： 我拍摄的插入符号向下的图像来自Google Icons，你可以在这里找到它 除了上面的答案之外，您最好将 z-index 添加到元素中，以将伪元素 ::after 放置在原始选择的“后面”。否则，当用户单击箭头时什么也不会发生。 select { z-index: 10; position: relative; background: transparent; } .select-wrapper::after { z-index: 0; }

如何创建具有相同属性的多个下拉菜单

我使用的是Struts 1.3，我希望能够为不同的选项提供下拉菜单，如下所示： 以下示例具有以下格式： 单选按钮：下拉值 1 下拉值...

如何在javascript中使用querySelector获取html选择元素

我有一个类名为“data”的 div，其中包含 3 个不同的元素：inpyt、select 和 textarea。 我想将元素放入带有 querySelectorAll 的数组中并循环...

从排序的二维数组中打印带有 optgroup 标签的选项标签

以我的数组为例 $选项=数组( 数组（“品牌”=>“彪马”，“代码”=>“p01”，“名称”=>“彪马一号”）， array("品牌" => "彪马","代码" => "p02","名称" => "彪马二号"), 数组（“

从列表 php 传递会话变量

我在通过选项列表中的链接传递会话变量时遇到一个主要问题。 搜索了很多帖子后，我没有看到任何有帮助的内容。 这是代码示例。 ...

React 选项选定的属性不起作用

我想将男性值设置为默认选择，但它不起作用。 我想将 male 值设置为默认选择，但它不起作用。 <select {...register("gender")} className="form-select input" id="gender"> <option value="Male" selected>{t("signUpPage.male")}</option> <option value="Female">{t("signUpPage.female")}</option> </select> 问题是 React 不能很好地处理标签中的选定属性，因为它处理状态的方式与纯 HTML 不同。您需要直接使用defaultValue或value属性来设置select元素的默认值，而不是使用selected。 <select {...register("gender")} className="form-select input" id="gender" defaultValue="Male"> <option value="Male">{t("signUpPage.male")}</option> <option value="Female">{t("signUpPage.female")}</option> </select>

Razor 页面 <select asp-for> 作为空值提交

我无法获取 使用 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 属性解决了。

设置选择框的选定选项

我想设置一个先前选择的选项以在页面加载时显示。我用下面的代码尝试过： $("#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"); });

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

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

如何动态检索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> 标签的代码，如前面的示例所示。 提前非常感谢您 这取决于您使用的编程语言以及您想要在哪里执行此操作，例如前端、网站服务器、数据库……您是否想重新发明网络爬虫？

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

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

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

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

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

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

如何用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; ?> <!-- And this part would be in your View --> <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> <!-- finish the form in html --> <input type="text" value="" name="name"> <input type="submit" value="go" name="go"> </form> 只要这些值是按某种数字顺序（升序或降序）的整数，我的代码就可以工作。它的作用是在 html 中启动下拉列表，并在 php 代码中添加每个选项元素。但如果您有随机值，即：1、4、2、7、6，则它将不起作用。每个值必须是唯一的。

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

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

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

我有一个下拉菜单来显示搜索的价格范围。 下拉菜单的 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 ?>

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

我在制作的表单中使用了 元素，允许进行多项选择，但我想将最大选择数量限制为 10。使用 JavaScript 或 jQuery 可以吗？ 我正在制作的表单中使用 <select> 元素，允许进行多项选择，但我想将最大选择数量限制为 10。使用 JavaScript 或 jQuery 可以吗？ 这里有一些完整的代码供您使用...一定喜欢 Google AJAX API Playground :-) 编辑1：注意：这只能让你选择5个，因为我不想复制/粘贴另外10个选项:-) <!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!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; } } }) });