html-select 相关问题

如何使用 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>

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 视图。视图从数据库中获取所需的数据，并且应该...