html-select 相关问题

将选项设置为使用 php 选择的

如何使用 PHP 将选择选项设置为发送表单时选择的选项？这是我陷入困境的代码： 如何使用 PHP 将选择选项设置为发送表单时选择的选项？这是我陷入困境的代码： <?php if(isset($_POST['btSubmit'])) { $selectedOption = $_POST['s']; // Value of selected option … but how to use it below? } ?> <form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="POST"> <select name="s"> <option value="" selected disabled>-- choose one --</option> <option value="a">choose a</option> <option value="b">choose b</option> </select> <input type="submit" name="btSubmit"> </form> 因此，当您在页面的下一次加载时发送带有选择的表单时，默认情况下应选择 a。 只需将 selected="selected" 属性添加到您在 option 下收到的 $_POST['s'] 标签即可。 <?php $selectedOption = ''; if(isset($_POST['btSubmit'])) { $selectedOption = $_POST['s']; // Value of selected option … but how to use it below? } function injectSelectedAttribute($selectedOption, $option_value){ return strtolower($selectedOption) === strtolower($option_value) ? 'selected="selected"' : ''; } ?> <form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="POST"> <select name="s"> <option value="" disabled>-- choose one --</option> <option value="a" <?php echo injectSelectedAttribute($selectedOption, 'a'); ?>>choose a</option> <option value="b" <?php echo injectSelectedAttribute($selectedOption, 'b'); ?>>choose b</option> </select> <input type="submit" name="btSubmit"> </form> 您可以进一步改进它，通过循环选择选项的 PHP 数组来回显选项的 HTML。 <select required name="role_user" class="form-select"> <?php $options = array( 'DG', 'DD1', 'DD2', 'DD3', 'SPAG', 'AG' ); $options_title = array( 'Admin', 'Superviseur Direction 1', 'Superviseur Direction 2', 'Superviseur Direction 3', 'Super-Agent', 'Agent' ); $output = ''; for( $i=0; $i<count($options); $i++ ) { if ($get_users_data["permission"] == $options[$i]) { echo "<option value=$options[$i] selected> $options_title[$i]</option>"; }else{ echo "<option value=$options[$i] > $options_title[$i]</option>"; } } ?> </select> Try this, <?php if(isset($_POST['btSubmit'])) { $selectedOption = $_POST['s']; // Value of selected option … but how to use it below? } ?> <form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="POST"> <select name="s"> <option value="" selected disabled>-- choose one --</option> <option value="a" <?php echo $selectedOption=='a'?'selected':'' ;?>>choose a</option> <option value="b" <?php echo $selectedOption=='b'?'selected':'' ;?>>choose b</option> </select> <input type="submit" name="btSubmit"> </form>

html 选择选项已选择

我的php中有 $sel =“ 一个 两个 三 四个 ”; 让我们说...

方法 OnClick - ASP.NET Core - 剃刀页面

我有一个带有 标签的按钮，在这个标签中我定义了 onclick 的方法。该事件正在调用脚本。我想将我的标签更改为 ，在此标签中我们不能使用... 我有一个带有 <a> 标签的按钮，在这个标签中我定义了 onclick 的方法。该事件正在调用脚本。我想将标签更改为 <Select>，在此标签中我们不能使用 onclick - 如何在选择标签中使用 onclick 并调用该脚本？ 在我的项目中，我希望当单击标签时获取记录 Id 并获取该 Id 的值 我希望当我单击选择（黑色区域）时获取 Id 记录红色区域并从表中获取所有记录值 <a href="#" id="Usernm2" name="id" onclick="getSddIdW(@item.Id)" data-target="#ModalSend" data-toggle="modal" class="AllIcon " data-placement="tooltip" title=""> <i class="btn bg-primary-bright"></i> </a> 下面是<Select>中使用onclick的demo，大家可以参考一下。 @page @model IndexModel @{ ViewData["Title"] = "Home page"; } @functions{ public string GetHello() { return "Hello"; } } <select id="TypeOfUser" name="typeOfUser" class="active text-normal" Onclick="RazorFunction()"> <option value="2" >CMS Users</option> <option value="3">Site Users</option> </select> <button> aa</button> @section Scripts { <script> function RazorFunction() { $("button").html('@GetHello()'); } </script> } 结果： 但我建议你在onchange中使用<Select>。 结果：

选择下拉内嵌标签文本

我想在我的选择下拉列表中插入一个标签。 此处，“销售”是标签文本，“美国”是下拉选项之一。 实现这个的最好方法是什么。我觉得我必须写......

无法使用我保存在 props 中的 id 作为 React select 中的默认值

我有一个呈现可重用下拉列表的组件。当我使用它添加新项目时，我可以设置类别，但是当我使用它编辑项目时，下拉列表不会显示所选类别

如何将国家/地区代码列表及其标志添加到 html 代码

我想在 html 输入标签中添加国家标志，是的，引导程序助手可以做到这一点。但我不知道如何添加链接和脚本来解决我的问题。那么有什么帮助吗？

如何使用 JavaScript 以编程方式选择 HTML 选项？

我有这样的选项菜单： 人1 个人... 我有这样的选项菜单： <form name="AddAndEdit"> <select name="list" id="personlist"> <option value="11">Person1</option> <option value="27">Person2</option> <option value="17">Person3</option> <option value="10">Person4</option> <option value="7">Person5</option> <option value="32">Person6</option> <option value="18">Person7</option> <option value="29">Person8</option> <option value="28">Person9</option> <option value="34">Person10</option> <option value="12">Person11</option> <option value="19">Person12</option> </select> </form> 现在我想使用 href 更改所选选项。例如： <a href="javascript:void(0);" onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a> 但我想选择带有 value=11 (Person1) 的选项，而不是 Person12。 如何更改此代码？ 改变 document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected' 到 document.getElementById('personlist').value=Person_ID; 作为纯 JavaScript 代码的工具，用于处理 Selectbox： 图解理解： 图片-A 图片-B 图片-C 更新 - 2019 年 6 月 25 日 | Fiddler 演示 JavaScript 代码： /** * Empty Select Box * @param eid Element ID * @param value text * @param text text * @author Neeraj.Singh */ function emptySelectBoxById(eid, value, text) { document.getElementById(eid).innerHTML = "<option value='" + value + "'>" + text + "</option>"; } /** * Reset Select Box * @param eid Element ID */ function resetSelectBoxById(eid) { document.getElementById(eid).options[0].selected = 'selected'; } /** * Set Select Box Selection By Index * @param eid Element ID * @param eindx Element Index */ function setSelectBoxByIndex(eid, eindx) { document.getElementById(eid).getElementsByTagName('option')[eindx].selected = 'selected'; //or document.getElementById(eid).options[eindx].selected = 'selected'; } /** * Set Select Box Selection By Value * @param eid Element ID * @param eval Element Index */ function setSelectBoxByValue(eid, eval) { document.getElementById(eid).value = eval; } /** * Set Select Box Selection By Text * @param eid Element ID * @param eval Element Index */ function setSelectBoxByText(eid, etxt) { var eid = document.getElementById(eid); for (var i = 0; i < eid.options.length; ++i) { if (eid.options[i].text === etxt) eid.options[i].selected = true; } } /** * Get Select Box Text By ID * @param eid Element ID * @return string */ function getSelectBoxText(eid) { return document.getElementById(eid).options[document.getElementById(eid).selectedIndex].text; } /** * Get Select Box Value By ID * @param eid Element ID * @return string */ function getSelectBoxValue(id) { return document.getElementById(id).options[document.getElementById(id).selectedIndex].value; } mySelect.value = myValue; 其中 mySelect 是您的选择框，myValue 是您想要将其更改为的值。 我相信博客文章JavaScript初学者 – 按值选择下拉选项可能会对您有所帮助。 <a href="javascript:void(0);" onclick="selectItemByValue(document.getElementById('personlist'),11)">change</a> function selectItemByValue(elmnt, value){ for(var i=0; i < elmnt.options.length; i++) { if(elmnt.options[i].value === value) { elmnt.selectedIndex = i; break; } } } 您还可以像这样更改 select.options.selectedIndex DOM 属性： function selectOption(index){ document.getElementById("select_id").options.selectedIndex = index; } <p> <select id="select_id"> <option selected>first option</option> <option>second option</option> <option>third option</option> </select> </p> <p> <button onclick="selectOption(0);">Select first option</button> <button onclick="selectOption(1);">Select second option</button> <button onclick="selectOption(2);">Select third option</button> </p> 如果您使用 javascript 添加选项 function AddNewOption(userRoutes, text, id) { var option = document.createElement("option"); option.text = text; option.value = id; option.selected = "selected"; userdRoutes.add(option); } 您也可以使用 JQuery $(document).ready(function () { $('#personlist').val("10"); } 从技术上来说，你自己的答案并没有错，但是你的索引是错误的，因为索引从 0 开始，而不是 1。这就是你选择错误的原因。 document.getElementById('personlist').getElementsByTagName('option')[**10**].selected = 'selected'; 此外，对于标签不完全是英文或数字的情况，您的答案实际上是一个很好的答案。 例如，如果他们使用亚洲字符，则告诉您使用 .value() 的其他解决方案可能并不总是有效，并且不会执行任何操作。按标签选择是忽略实际文本并按元素本身选择的好方法。 数组索引将从 0 开始。如果您想要 value=11（Person1），您将在位置 getElementsByTagName('option')[10].selected 处获得它。 这是一篇旧帖子，但如果有人仍在寻找此类问题的解决方案，这就是我的想法： <script> document.addEventListener("DOMContentLoaded", function(e) { document.forms['AddAndEdit'].elements['list'].value = 11; }); </script> 注意：选项索引计数从 0 开始。这意味着第一个选项将从 0 开始索引。 document.querySelector(".add__btn").addEventListener("click", function(){ var index = 1; /*change option value here*/ document.querySelector(".add__type").options.selectedIndex = index; document.querySelector(".add__description").value = "Option Index"; document.querySelector(".add__value").value = index; }); <html> <div class="add__container"> <select class="add__type"> <option value="inc" selected>+</option> <option value="exp">-</option> </select> <input type="text" class="add__description" placeholder="Add description"> <input type="number" class="add__value" placeholder="Value"> <button class="add__btn"> Submit </button> </div> <h4> Default Option Value will be selected after pressing Submit </h4> 如果您按照接受的答案使用 mySelect.value = myOptionValue ，但它 still 似乎不起作用，那么请确保在调用代码时，选择元素已完全呈现并可交互 - 如果您在页面加载时调用代码，但它不是通过类似window.onload，DOMContentLoaded， qjuery 的 .ready() 或您的环境中使用的任何内容，那么您可能太早运行代码了。 要验证是否是这种情况，请在页面完全加载时通过开发工具手动运行代码，或使用 setTimeout() 延迟它。 Jquery 解决方案， $('select').prop('selectedIndex', 1);

有什么方法可以防止“取消选择”突出显示的文本吗？

突出显示该网页上的一些文本，然后单击文档上的任意位置。 您的选择将会消失。 当用户单击特定元素时，有没有办法防止这种行为......

如何在不使用value属性的情况下从select中选择选项？

有没有办法使用css选择器选择具有Value1的第一个选项。我正在开发使用 puppeteer 创建的自动化工具，我可以打开下拉菜单，但无法单击该选项...

如何使用 vue/inertia 使默认选项显示在下拉菜单中？

我正在使用 Inertia、Vue3 和 Laravel，但我似乎无法获得下拉菜单来自动填充第一个选项。它只是一片空白。这是我的代码： 我正在使用 Inertia、Vue3 和 Laravel，但我似乎无法获得下拉菜单来自动填充第一个选项。它只是一片空白。这是我的代码： <template> <form @submit.prevent="update"> <div> <div @change="update"> <input v-model="form.description" type="text" /> <input v-model="form.amount" type="text" /> <select v-model="form.frequency"> <option value="monthly">Monthly</option> <option value="quarterly">Quarterly</option> <option value="yearly">Yearly</option> </select> <input v-model="form.day_deposited" type="text" /> </div> </div> </form> </template> <script setup> import { useForm } from '@inertiajs/vue3' const props = defineProps({ income: Object, }) const form = useForm({ description: props.income.description, amount: props.income.amount, day_deposited: props.income.day_deposited, frequency: props.income.frequency, }) const update = () => form.put(`/income/${props.income.id}`) </script> 我尝试过使用 selected 和 form.defaults()。 你的组件.vue <template> <form @submit.prevent="update"> <div> <div @change="update"> <input v-model="form.description" type="text" /> <input v-model="form.amount" type="text" /> <select v-model="form.frequency" :value="form.frequency || 'monthly'"> <option value="monthly">Monthly</option> <option value="quarterly">Quarterly</option> <option value="yearly">Yearly</option> </select> <input v-model="form.day_deposited" type="text" /> </div> </div> </form> </template> <script setup> import { useForm } from '@inertiajs/vue3' const props = defineProps({ income: { type: Object, required: true, default: () => ({ frequency: 'monthly' // Set default here }) } }) const form = useForm({ description: props.income.description, amount: props.income.amount, day_deposited: props.income.day_deposited, frequency: props.income.frequency || 'monthly' // Set default here as fallback }) const update = () => form.put(`/income/${props.income.id}`) </script> 该解决方案提供了两种方法来确保默认值： 在选择元素中使用 :value 绑定和后备 在道具定义中设置默认值 在表单初始化中设置后备 下拉列表现在将始终显示一个值，无论是来自您的数据还是默认为“每月”。

将两个二维数组中的唯一列值打印为<option>标签，并在相交值上声明“selected”属性

我有两个二维数组，如下所示： $用户= [ ['用户名' => '蒂莫西'], ['用户名' => '弗雷德里克'] ]; $user2 = [ ['用户名' => '乔纳森'], ['用户名' => '弗雷德里克...

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>