html-select 相关问题

rails select_tag 和 selected 属性有问题，因为它似乎没有传递选定的值，只有所有项目都传递给控制器。在视图下方的表单块中， rails select_tag 和 selected 属性有问题，因为它似乎没有传递选定的值，只有所有项目都传递给控制器。在表单块下方的视图中， <div class="col-md-2"> <div class="form-group"> <%= label_tag 'Exportações' %> <br/> <div class="input-group"> <%= select_tag :status, options_for_select(statuses.map { |status| [status, status] }, :selected => params[:status]), :multiple => true, :prompt => 'All', :class => 'form-control shadow-sm form-control-sm'%> <div class="input-group-append"> <%= link_to admin_status_export_path, class: 'btn btn-sm btn-dark ml-4', method: :post do %> <%= icon('fas', 'file-excel ', ' Exportaçõ') %> <% end %> </div> </div> </div> </div> 目前，为了识别个人状态（白名单等），在控制器中仅输出为 json，比较发送到 DB 中所有项目的内容： def customers_status_export @customers = Customer.where(status_trust: %w[blacklist whitelist normal]) @status = params[:status] if @status.present? @customers = @customers.where(status_trust: @status) end render json: @customers When one item is selected in the view (whitelist, of which 4 are in DB, and whitelist, blacklist and normal in the select box.) we still get all the items as json, when only want for now the 4 whitelist items, so the selected param in the select_tag is not catching whitelist? 状态是从 uniq 之前对 db 的调用映射的，如果再添加更多，最好在 select_tag 中对它们进行硬编码，还是有其他影响？（其他一切都很好，包括完成时的 csv 文件下载，这是所有项目，而不是仅列入白名单并选中的 4 个项目）欢迎任何提示？谢谢 options_for_select 基本上输入是第一个参数的数组，第二个参数直接是它的值。 options_for_select([ "VISA", "MasterCard" ], "MasterCard") # above is an array and the second parameter is the selected value 你的问题 # if statuses is an array options_for_select(statuses.map { |status| status }, params[:status]) # if statuses is a record options_for_select(statuses.map { |status| status.put_here_field_name }, params[:status]) 编辑 2：options_from_collection_for_select options_from_collection_for_select(collection, value_method, text_method, selected = nil) # since you want more than one selected items I think this can help in controller / other place @selected_reason_array = ['abc', 'def'] options_from_collection_for_select(@reasons, "id", "text", selected: @selected_reason_array) # pay attentions to second and third parameters # @reasons are your records that automatically will be looped

ruby-on-rails select html-select

回答 1 投票 0

来自 Ajax 的 Jquery 动态列表：选择选项不起作用

我正在使用 ajax/jquery 加载商店列表，但是当用户选择商店时，它不会在页面刷新时保持选中该选项。它一直回到默认值（查看全部），我试过做 cfif

jquery ajax html-select

回答 0 投票 0

如何使用 Groovy 从选项列表中选择文本？

我想知道如何从选项列表中选择文本而不是值（HTML 形式）。如果我运行以下命令： def optionName = getFieldByName('SelectName') 它总是返回我...

groovy html-select

回答 0 投票 0

如何在 SQL 中保存选择菜单的名称和值？

假设我们有一个简化的菜单示例：假设我们有一个简化的菜单示例： <?php for ($w=0; $w<10; $w++){ ?> <div class="col-md-12"> <div class="form-group"> <select class="form-control" name="<?php echo 'Brandt['.$w.']';?>[Color]" id="<?php echo 'IDBrandt['.$w.']';?>[Color]"> <option value="value1"> Text1</option> <option value="value2"> Text2</option> ....... </select> <input type="text" class="form-control" hidden> </div> </div> <?php } ?> 我已经将菜单的值发送到我的数据库，但我想保存和实际选择菜单文本（如 Text1、Text2..）。我想在这个隐藏的输入字段中创建，所选菜单的名称，以便能够将值和名称=文本保存在我的数据库中.. 例如，我希望这个输入字段有一个 <input type="text" name="SavedText" value = "<?PHP echo //Text of Selected Menu ?> "class="form-control" hidden> 我想避免使用 Javascript（如果可能的话）使用“on change”脚本来完成它......理想情况下，我什至想避免用隐藏的输入字段显示它并将它直接保存到 php 变量中......如果可能的话……有什么帮助吗？如果我理解正确，您希望在您的 <option> 中以标准形式发布任何给定的选定 <select> two“值”。仅发布一个“值”，因此如果您想要该值中的两条数据，则需要包含这些数据。例如，考虑这个 <option> 元素： <option value="value1|Text1"> Text1</option> 如果选中，则在发布表单时，将为给定的 "value1|Text1" 元素发布值 <select>。然后在您的服务器端代码中，您可以通过从已知的分隔符（在本例中为竖线字符）中拆分值来解析这两条信息。请注意，您可能不需要这样做。通常，<select> 中的“值”通常是某种引用某处数据的唯一标识符。该数据用于填充这些<option> 元素。（尽管在您的示例中，这些似乎是硬编码的。但即使是硬编码的查找数据仍然是查找数据。）所以一般你真的只需要将"value1"发布到服务器，然后服务器端代码可以使用该标识符来查找/推断"Text1"部分。有例外情况和需要多个值的用例，但这些情况往往非常罕见，因此值得检查一下您是否需要在这里这样做。

php html-select

回答 0 投票 0

使用 jQuery 向 <select> 添加选项？

使用 jQuery 向下拉列表添加选项的最简单方法是什么？这行得通吗？ $("#mySelect").append('我的选择');

javascript jquery html-select

回答 30 投票 0

如何滚动选择列表中的选项？关于答案的问题

原始问题发布在这里：Set current item in a HTML , but in the middle 在作者提出的问题中：“如何使所选项目出现在中间...... 原始问题发布在这里：在 HTML 中设置当前项目，但在中间在作者提出的问题中：“如何使所选项目出现在列表视图的中间，或者，或者，在列表视图的顶部？” 这是关于@OstoneO 发布的惊人答案的问题！我看不懂他的代码是如何工作的，所以我的代码占据了更多的位置，但这是理解他发布的代码的唯一解决方案。尤其是这里： const selected = l.options[l.selectedIndex]; const intoView = (block = 'center') => selected.scrollIntoView({ block }); intoView(); 所以我花了很多时间以“我的方式”写它，现在我几乎能够理解他现在做了什么。所以这是一个与答案相关的问题... 我先把我的代码写成一个片段，而不是 OstoneO 的片段。像下面这样写也是正确的吗，我想知道这是否会导致执行速度比第二个片段慢（我想是的）... 我真的不明白“最近”这个选项是什么意思。如果我在“结束”之后单击“最近”，似乎没有任何变化，“开始”或“中心”之后的“最近”也是如此。在我的例子中，为了在开始时初始化滚动位置，我不得不创建另一个函数initList(position)，因为我不能在var type = this.name;中调用var type = event.target.name;或initList(position)是否有一个周转，一个避免添加另一个的技巧启动时的功能？有人可以帮我解释一下这些细节，以及为什么在这种情况下使用“onClick”似乎比向按钮添加事件监听器更有效。这是我的代码片段： window.addEventListener("DOMContentLoaded",init); let selectContainer,selector,selectionDisplay; let selectorLength = 100; let buttons; let defaultScroll = "center"; function init(){ selectContainer = document.getElementById("selectContainer"); selector = document.getElementById("selector"); selectionDisplay = document.getElementById("selectionDisplay"); buttons = document.getElementById("buttons").getElementsByTagName("button"); for(var i = 1; i<= selectorLength; i++){ addElement (selector, i, i); } for (var j = 0; j < buttons.length; j++){ buttons[j].addEventListener("click",intoView); } selector.value = 17; initList(defaultScroll); selector.addEventListener("change",getOptValue); getOptValue(); } function addElement(target, value, textContent) { const newOption = document.createElement("option"); newOption.value = value; const newContent = document.createTextNode("element " + textContent); newOption.appendChild(newContent); target.appendChild(newOption); getOptValue(); } function getOptValue(e){ selectionDisplay.textContent = selector.value; } function intoView(event){ var type = this.name; var selected = selector.options[selector.selectedIndex]; selected.scrollIntoView({ block:this.name }); } function initList(position){ var type = position; var selected = selector.options[selector.selectedIndex]; selected.scrollIntoView({ block:type }); } <div id="selectContainer"> <select id="selector" size="7"> <option value="null" disabled>select a value</option> </select> </div> <div id="buttons"> <br> <button name="start">Start</button> <button name="center">Center</button> <button name="nearest">Nearest</button> <button name="end">End</button> <br> </div> <div id="selectionDisplay"> default value </div> 这是 OstoneO 发布的片段... var l = document.getElementById("list"); for (var i = 0; i < 100; i++) { l.innerHTML += "<option value='" + i + "'>" + i + "</option>"; } l.value = 17; // Demo const selected = l.options[l.selectedIndex]; const intoView = (block = 'center') => selected.scrollIntoView({ block }); intoView(); #list { width: 100px; } <select id="list" multiple size=10></select>  <br /> <button onclick='intoView("start");'>Start</button> <button onclick='intoView();'>Center</button> <button onclick='intoView("nearest");'>Nearest</button> <button onclick='intoView("end");'>End</button>  祝你有美好的一天，并致以最诚挚的问候。

javascript html html-select

回答 0 投票 0

如何在 HTML 和 CSS 中更改 select 的占位符选项？

我正在尝试更改值为“”的选择选项的颜色。这是我的 HTML： ...

html css select html-select

回答 2 投票 0

如何从下拉菜单中选择跨度下定义的元素

大家好，你们能帮我吗？由于我无法从更好的视觉效果中选择范围内的下拉菜单中的元素：这是html代码：大家好，你们能帮我吗？因为我无法从跨度的下拉菜单中选择元素，从更好的视觉：这里是html代码： <input type="search" autocomplete="none" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_0_list" aria-autocomplete="list" aria-controls="rc_select_0_list" aria-activedescendant="rc_select_0_list_0" readonly="" unselectable="on" value="" style="opacity: 0;" id="rc_select_0" aria-expanded="false"> 使用 selenium 中的以下解决方案，我能够扩展下拉列表（我在这里找到的解决方案）： WebElement dropDown = (WebElement)Driver.Instance.FindElement(By.XPath("//*[@id=\"root\"]/main/section/form/div/div[1]/div[1]/div[1]/div/div/div")); 但在那之后，我尝试了几十个选项，但我无法选择任何元素。为了获得更好的视觉效果，这里是下拉列表中所有项目的跨度： <span class="ant-select-selection-item" title="Mr.">Mr.</span> <span class="ant-select-selection-item" title="Mrs.">Mrs.</span> <span class="ant-select-selection-item" title="Dr.">Dr.</span> <span class="ant-select-selection-item" title="Prof.">Prof.</span> 这实际上不是一个 SELECT 元素，它是一个看起来像普通下拉列表的元素集合。您需要单击顶级元素以打开下拉列表，然后在所需元素可见后选择它。单击“教授”的示例代码“称呼”标签下的选项： WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10)); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//div[.//label[text()='Salutation']//div[@class='ant-select-selection']"))).Click(); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//div[.//label[text()='Salutation']//span[@class='ant-select-selection-item'][@title='Prof.']"))).Click(); 我假设你会不止一次地使用它......你需要设置称呼，名字，姓氏等。我会把它放在一个方法中以使其更易于使用。 /// <summary> /// Selects an option from the dropdown based on the label and desired option. /// </summary> /// <param name="label">The dropdown label.</param> /// <param name="option">The option to be chosen from the dropdown.</param> public void SelectOption(string label, string option) { WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10)); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath($"//div[.//label[text()='{label}']//div[@class='ant-select-selection']"))).Click(); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath($"//div[.//label[text()='{label}']//span[@class='ant-select-selection-item'][@title='{option}']"))).Click(); } 然后像这样称呼它 SelectOption("Salutation", "Prof."); 在杰夫的帮助下过了一会儿。我能够从下拉列表中选择元素。这是一个代码 ///扩展下拉列表 WebDriverWait wait = new WebDriverWait(Driver.Instance, TimeSpan.FromSeconds(50)); wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//*[@id=\"root\"]/main/section/form/div/div[1]/div[1]/div[1]/div/div"))).Click(); ///从下拉列表中选择元素 wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("/html/body/div[3]/div/div/div/div[2]/div[1]/div/div/div[1]/div"))).Click();

c# selenium-webdriver drop-down-menu html-select

回答 2 投票 0

Vue 3 SPA。 Select 发出 lang 并且 contentStore 不会仅在移动设备中更新内容

Vite 4.2 和 TypeScript 5.02 上的 Vue 3 SPA。单击时选择发出 lang.value 并且在父组件 App.vue contentStore 中应该更新内容。在我的 Linux Ubu 上完美运行的典型事物......

typescript vue.js vuejs3 html-select pinia

回答 1 投票 0

清除嵌套选项 html 表单字段

有人知道如何使用 f.e. 清除表单中的选项嵌套字段吗？ jQuery 还是简单的 js？我的表格很简单（在表中）：有人知道如何使用 f.e. 清除表单中的选项嵌套字段吗？ jQuery 还是简单的 js？我的表格很简单（在表中）： <table width="100%"> <tr> <td colspan="2"> <p class="form"><label>Status</label> <select class="wpcf7-form-control" name="StatusId" id="StatusId" required> <option value="1" rel="rel1">Option 1</option> <option value="2" rel="rel1">Option 2</option> <option value="3" rel="rel2">Option 3</option> </select> </p> </td> </tr> <tr rel="rel1"> <td colspan="2"> <p class="form"> <label>Some label 1</label> <select class="wpcf7-form-control" name="DepartmentId" id="DepartmentId" data-bvalidator="required" data-bvalidator-msg="required"> <option value=""></option> <option value="1">Option A</option> <option value="2">Option B</option> <option value="3">Option C</option> </select> </p> </td> </tr> <tr rel="rel2"> <td> <p class="form"> <label>Other status</label> <input class="wpcf7-form-control" type="text" name="otherStatus" id="otherStatus" /> </p> </td> <td> <p class="form"> <label>Some label 2</label> <input class="wpcf7-form-control" type="text" name="otherDepartment" id="otherDepartment" size="41" maxlength="256" /> </p> </td> </tr> </table> 问题是，如何做到这一点，当我们使用主选择更改选项时，应该清除嵌套选项。但现在他们不是了。提前感谢您的回答，我搜索了很多解决方案，但未能申请到我的表格。

forms select html-select option-type

回答 0 投票 0

onChange的事件是否可以只读取内部标签的值？

我有一个选择下拉列表，其中列出了一些菜单项，但现在我想添加一个 ListSubheader。我在从我的 MenuItem 中获取 event.target.value 时遇到问题，因为我必须将它们包装在一个 div t ...

reactjs material-ui dropdown html-select menuitem

回答 1 投票 0

React中，onChange的事件是否可以只读取内层标签的值？

我有一个 Select 下拉列表，其中列出了一些 MenuItems，但现在我想添加一个 ListSubheader 并且我在从我的 MenuItem 中获取 event.target.value 时遇到问题，因为我必须将它们包装在一个 di ...

reactjs material-ui dropdown html-select menuitem

回答 0 投票 0

如何将导航按钮添加到选择组件 (MUI)

所以我有这个来自 MUI 的 Select 组件，它工作正常。从列表中选择一个项目后，路由器将推送到该位置：这是代码：导出默认函数