天道酬勤,学无止境

无需提交即可从html表单中的下拉框中获取所选值(Getting selected value from drop down box in a html form without submit)

问题

如何从html表单的下拉框元素中获取所选项目的文本? (使用python)当我使用鼠标从下拉框中选择一项时,如何将值存储到变量中? (即不使用提交按钮)

这是针对我在仅支持 Python 的应用引擎中执行的应用程序。

回答1

您的问题表明对 Web 应用程序的工作方式存在一些误解。

用户必须在浏览器中输入地址才能访问应用程序。 这将向服务器发送请求。 服务器代码(用python编写)接收到这个请求并有机会发送一个答案。 答案是通常用 HTML 编写的文档。 本文档的某些部分可以是动态的,即由 python 代码生成。 文档的其他部分可以是静态的。 然后浏览器在用户窗口上呈现文档。

之后,您的 Python 代码可以了解浏览器窗口上发生的事情或运行 Python 代码的任何部分的唯一方法,就是让浏览器发送另一个请求。

这可能发生在许多情况下,最常见的是:

  • 用户点击另一个 url 的链接,使浏览器向这个新 url 发送另一个请求。
  • 用户单击submit按钮,使浏览器将表单作为请求提交到表单的action属性中配置的地址。
  • 实际页面中的一些代码,通常用 ECMAscript(也称为javascript )编写,在后台发出请求。

后者是你想要的。 您必须在javascript 中编写一些代码,以使浏览器将下拉列表中选择的信息发送到服务器。 这样你在服务器上的 python 代码就可以做一些事情了。

做到这一点的简单方法是让下拉菜单的onchange事件进行提交:

<select name='myfield' onchange='this.form.submit()'>
<option .... >
...
</select>
</form>

这样,当用户更改下拉列表中的值时,表单将被提交,就像用户单击提交一样。 服务器上的 Python 代码将运行。 浏览器将加载答案。

另一种流行的方法是使用 javascript 的 XmlHTTPRequest DOM API 来发送请求。 这样你就可以在 python 中接收值并发送一个答案,然后浏览器中的 javascript 代码会收到这个答案。 该代码可以根据答案更改页面的某些部分,而无需更改整个页面。 这种技术称为 AJAX。

如果您打算编写大量 javascript 代码,我强烈建议您至少使用 javascript 库来减轻处理许多浏览器版本的痛苦。 jQuery 是我的首选库。

换句话说,在浏览器中运行的用 javascript 编写的代码与在服务器中运行的用 python 编写的代码进行对话

回答2

您的 Python 代码在服务器(google appengine)上运行。 HTML 表单在客户端(在浏览器中)运行。 客户端和服务器通过 HTTP 协议进行通信。 客户端发送请求,服务器响应响应。 你必须向服务器发送一些东西,让你的 python 代码知道用户的操作。

在客户端,您可以使用 Javascript(考虑使用 jQuery 库)。 可能您可以在不与服务器通信的情况下离开。

如果您必须与服务器通信但不想重新加载页面,请使用 AJAX 技术。 在这种情况下,您必须在 Python 应用程序中创建特殊视图并在 Javascript 中启动请求。

请记住,Javascript 用于客户端,Python 用于服务器端。

回答3

如果您需要将选定的值发送到您的服务器而不提交,我认为最好的(如果不是唯一的)方法是使用一些 ajax。

如果您使用的是 jQuery,请查看它的 ajax 内容。 它是事件模型。 您首先必须将下拉列表的事件附加到要执行的函数。 因此,当用户更改下拉列表时,浏览器将在幕后打开一个新连接。 因此,您可以获取该值并将其保存在服务器端。 会…… 像这样:

$(document).ready( 

    $("#select_id").change(function() {
        $(this).getJSON("/method", {"selectValue":$(this).val()}, function() {
                   alert("value received!");
              });
    });

);

希望能帮助到你!

回答4

使用 onchange 的问题在于并非所有用户都使用鼠标。 如果您有一个组合框并使用键盘更改值,那么如果不提交表单,您将永远无法超过第一个值。

~Cyrix

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何确保表单字段被禁用时是否提交?(How to ensure a <select> form field is submitted when it is disabled?)
    问题 我有一个select表单字段,我想将其标记为“只读”,因为用户无法修改该值,但是该值仍与表单一起提交。 使用disabled属性可防止用户更改值,但不使用表单提交值。 readonly属性仅可用于input字段和textarea字段,但这基本上就是我想要的。 有什么办法可以使它正常工作吗? 我正在考虑的两种可能性包括: 而不是禁用select ,而是禁用所有option并使用CSS来使select变灰,使其看起来像被禁用。 将单击事件处理程序添加到“提交”按钮,以便在提交表单之前启用所有禁用的下拉菜单。 回答1 <select disabled="disabled"> .... </select> <input type="hidden" name="select_name" value="selected value" /> 其中select_name是您通常会赋予<select> 。 另外一个选项。 <select name="myselect" disabled="disabled"> <option value="myselectedvalue" selected="selected">My Value</option> .... </select> <input type="hidden" name="myselect" value="myselectedvalue
  • 使用JSTL为JSP下拉选择的值(Selected value for JSP drop down using JSTL)
    问题 我在Servlet中有SortedMap来填充JSP中的下拉值,并且我有以下代码 SortedMap<String, String> dept = findDepartment(); request.setAttribute("dept ", dept); 和在JSP中 <select name="department"> <c:forEach var="item" items="${dept}"> <option value="${item.key}">${item.value}</option> </c:forEach> </select> 我正在使用一个JSP页面进行插入和更新。 当我编辑页面时,如何设置所选值以下拉所选值将来自数据库的位置。 回答1 在HTML中,所选选项由<option>元素上selected属性的存在来表示,如下所示: <option ... selected>...</option> 或者,如果您对HTML / XHTML严格要求: <option ... selected="selected">...</option> 因此,您只需要让JSP / EL有条件地进行打印即可。 前提是您已按如下所示准备了选定的部门: request.setAttribute("selectedDept", selectedDept); 然后应该这样做:
  • Jquery 没有从下拉列表中获取选定的值(Jquery not getting the selected value from dropdown)
    问题 我正在尝试获取所选下拉列表的值,将所选值存储在数据库中,但它不采用下面的所选值是我的代码可以指导如何做。谢谢 更新 客户网络价目表/update.php $dbHost = 'localhost'; // usually localhost $dbUsername = 'xxx'; $dbPassword = 'xxxxxxxx'; $dbDatabase = 'fms'; $db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server."); mysql_select_db ($dbDatabase, $db) or die ("Could not select database."); $client_id=$_POST['clientid']; $feild=$_POST['field']; $data= $_POST['value']; $rownum=$_POST['rowid']; $sql="UPDATE $client_id SET ".$feild." = '".$data."' WHERE net_id = ".$rownum.""; print $sql; mysql_query($sql) ; html <?php
  • 在不提交表单的情况下获取选项值 [重复](Getting the option value without submitting a form [duplicate])
    问题 这个问题在这里已经有了答案: 没有提交按钮或 JavaScript 的 html 提交(3 个回答) 8 年前关闭。 我想在不提交表单的情况下使用用户选择的选项值。 这是我的 HTML 代码 Combo Box<br> <select name="select1"> <option value="IVP" selected>IVP</option> <option value="SURTEK">SURTEK</option> <option value="GUITARTUNER">GUITARTUNER</option> <option value="OTHER">OTHER</option> </select> 我想将选定的选项值带入一个 php 变量,以便根据选项值显示一组新数据。 谢谢 回答1 正如其他人所建议的那样,您应该使用 AJAX。 我建议查看 AJAX 调用的 javascript/Jquery 示例。 我猜您想根据用户选择的选项修改网络的一部分,最好的方法是使用一个单独的 PHP 脚本来接收所选选项(在 javascript/JQuery 中捕获)并返回您想要的新 HTML显示。 例如在 Jquery 中获取所选选项: var selected_option_value=$("#select1 option:selected").val(); 同样在
  • 在asp.net MVC中获取禁用下拉菜单的值(Get value of disabled drop down in asp.net mvc)
    问题 我有一个ASP.NET MVC应用程序。 我的页面(HTML SELECT)中有多个下拉列表,我必须禁用它们,因为用户继续一个一个地选择它们。 当用户将其发布回控制器时,作为函数(操作方法)参数,我会得到null。 我搜索发现HTML不会在表单数据中发送禁用字段的值。 用只读替换禁用的属性将不起作用,因为它将使下拉列表起作用。 随着用户的进行,我正在使用javascript动态生成下拉列表。 因此,没有一个下拉菜单,但可以根据用户需要进行选择。 有人可以告诉我如何获得这些价值吗? 回答1 一种可能性是使下拉列表为disabled="disabled"并包括一个具有相同名称和值的隐藏字段,该字段将允许将该值发送到服务器: @Html.DropDownListFor(x => x.FooId, Model.Foos, new { disabled = "disabled" }) @Html.HiddenFor(x => x.FooId) 如果您必须使用javascript动态禁用下拉菜单,则只需在禁用后将其当前选定的值分配给隐藏字段即可。 回答2 这是禁用控件的默认行为。 我建议您添加一个隐藏字段,并在此隐藏字段中设置DropDownList的值,然后使用它。 就像是: //just to create a interface for the user @Html
  • 根据所选动态更新表单操作(Dynamically update form action based on selected <option>)
    问题 所以,这就是我想要做的。我想要一个 HTML 中的下拉列表,其中包含一个根据下拉列表的值更改的提交按钮。 所以,当我有这个时: <select name="sizes" id="select13"> <option value="All">All</option> <option value="20x30">20x30</option> <option value="30x30">30x30</option> ... </select> 我需要的是一个检查值是什么的按钮。 如果值 = 20x30,则使用 URL www.example.com/20x30 如果值为 30x30,则使用 URL www.example.com/30x30 我远非 PHP 专家,所以任何能够让我朝着正确方向前进的人都将是一个救星:) 回答1 你可以试试这个: Javascript: function goto() { window.location = "http://www.example.com/"+document.getElementById('select13').value; } HTML: <select name="sizes" id="select13"> <option value="All">All</option> <option value="20x30">20x30<
  • 将值从下拉菜单传递到Flask模板(Passing value from a drop down menu to a Flask template)
    问题 我在将从HTML下拉菜单中选择的项目传递到SQL查询时遇到问题。 我不确定要实现此功能,我的代码中缺少什么概念。 我发现的大多数示例都在PHP中,但我不确定如何将其转换为Python。 这是场景。 我正在使用Flask和Sqlite,并尝试让用户从HTML下拉菜单中选择一个项目。 从下拉菜单中选择的项目将用于SQL查询中,以从数据库中检索信息,然后将这些结果显示在新页面上。 例如,用户从具有3个选项(红色,蓝色,绿色)的下拉菜单中选择“红色”,然后单击提交按钮。 “红色”将传递到我的app.py文件中的SQL查询,该查询将从color =“红色”的行中检索所有数据。 然后,检索到的数据将显示在/results.html上。 我相信我的问题是我没有正确地将一个值分配给下拉菜单中的项目,然后将该值传递给运行SQL查询的Python代码。 这是我对这应该如何工作的假设,但是我可能在这里错过了一些更大的东西。 我已经尝试了很多HTML来实现此目的,但是我什至不确定那是我的问题所在。 当我点击“提交”时,我进入了新页面,但是数据库中什么都没有显示 这是我的代码,用于我的2个视图(“ /”和“ results.html”)以及我的Python代码: @app.route('/results.html', methods=['GET','POST']) def results(): g
  • ASP.NET MVC DropDownList选定值问题(ASP.NET MVC DropDownList Selected Value Problem)
    问题 我已经阅读了很多有关此问题的信息,但我无法弄清楚。 我的视图上有一个下拉列表用于分页。 您选择要转到的页面,然后表单被提交。 返回视图后,将显示请求的页面。 下拉列表更改以反映新显示的页面。 一切正常。 我的问题是:我有2个提交按钮,一个用于下一页,一个用于上一页。 在控制器中,如果已按下提交之一,则应将页面#递增或递减1。这正在发生,并且正在显示正确的数据页面。 但是,无论如何,下拉列表都不会在显示视图时反映新的页码。 基本上,如果用户更改了下拉菜单,则在提交表单后将其发送回时,它将反映这些更改。 如果我以编程方式更改了页面#,即使显示了正确的数据页面,下拉列表也不会更改。 这是操作方法: public ActionResult Results(TechSearch search, string NextPage, string PrevPage) { if (NextPage != null) search.Page++; if (PrevPage != null) search.Page--; int resultCount = search.GetResultCount(Desk); List<int> pages = new List<int>(); int pageCount = (int)Math.Ceiling((decimal)resultCount /
  • jQuery从下拉列表中获取选定的选项(jQuery Get Selected Option From Dropdown)
    问题 通常,我使用$("#id").val()返回所选选项的值,但是这次不起作用。 所选标签的ID为aioConceptName HTML代码 <label>Name</label> <input type="text" name="name" /> <select id="aioConceptName"> <option>choose io</option> <option>roma</option> <option>totti</option> </select> 回答1 对于下拉选项,您可能想要这样的东西: var conceptName = $('#aioConceptName').find(":selected").text(); val()不能解决问题的原因是,单击选项不会更改下拉菜单的值,它只是将:selected属性添加到作为下拉菜单的子项的selected选项中。 回答2 设置每个选项的值 <select id="aioConceptName"> <option value="0">choose io</option> <option value="1">roma</option> <option value="2">totti</option> </select> $('#aioConceptName').val()无效,因为.val()返回value属性。
  • 提交后如何返回禁用下拉字段的值?(How can I return the value of disabled drop-down field after submit?)
    问题 我有一个下拉字段,如果选择了其中的任何项目,它将被禁用,之后我提交表单,但是(提交后)下拉字段没有任何值,我想在之后有一个值提交但我的下拉字段为空。 感谢您的帮助,(对不起我的英语) 你好,我们又见面了。 我的问题仍然存在,但还是谢谢; 为了更清楚,有我的代码: code: <tr> <td class="tbl_entry_form_title"><%=DTask.LU_TECHNICIAN_TITLE%> :</td> <td class="tbl_entry_form_input"> <c:if test="${isTechnicianAdmin eq false}"> <c:forEach var="current" items="${technicianTitleItems}"> <c:if test="${current.value eq taskBadrItem.lu_technician_title}"> <input name="lu_technician_title" value="${current.value}" onclick=" <c:if test="${salesCustomerResult > 0}">alert('something')</c:if> "/></c:if> </c:forEach></c:if><c:if test="$
  • 如何MVC 5下拉(多选)框(How to MVC 5 drop down (multiple select) box)
    问题 我在使用这个下拉框时遇到了问题,似乎无法正确设置,这是代码: 查看(Index.cshtml): @using EvaSimulator.Models @Model EvaSimulator.Models.ModelVariables @{ ViewBag.Title = "Index"; ModelVariables mv = new ModelVariables(); } @using (Html.BeginForm("DropDownBox", "Home", FormMethod.Get)) { @Html.DropDownList("dropdownbox", ) <button type="submit"></button> } <p>@Model.dropDownList</p> 模型(ModelVariables.cs): public string dropDownList = ""; 控制器(HomeController.cs): public ActionResult DropDownBox(string dropdownbox) { ModelVariables mv = new ModelVariables(); mv.dropDownList = dropdownbox; return this.View("Index", mv); }
  • 回传后下拉菜单不保留所选值(drop down not retaining selected value after post back)
    问题 我使用的是经典ASP,我有一个下拉列表供用户选择,然后按Submit。 在他们按下提交之后,下拉列表将返回到默认值,而不是他们选择的默认值。 无论如何,是否要保持回发之间的下拉状态,而不是回到默认状态? 可以根据需要发布代码示例。 谢谢! 回答1 您必须根据用户已发布的值在服务器端“选择它”。 <select id="cars"> <option value="volvo" <% if request.form("cars") = "volvo" then response.write("selected") end if %> >Volvo</option> <option value="Saab" <% if request.form("cars") = "Saab" then response.write("selected") end if %> >Saab</option> <option value="Mercedes" <% if request.form("cars") = "Mercedes" then response.write("selected") end if %> >Mercedes</option> <option value="Audi" <% if request.form("cars") = "Audi" then response
  • 如何从JSP的选择框中获取多个选择的值?(How to get multiple selected values from select box in JSP?)
    问题 我有一个html表单,其中有一个选择列表框,您可以从中选择多个值,因为它的multiple属性设置为multiple 。 考虑表格方法是获取方法。 表单的html代码如下。 <html> <head> <title>Untitled Document</title> </head> <body> <form id="form1" name="form1" method="get" action="display.jsp"> <table width="300" border="1"> <tr> <td><label>Multiple Selection </label> </td> <td><select name="select2" size="3" multiple="multiple" tabindex="1"> <option value="11">eleven</option> <option value="12">twelve</option> <option value="13">thirette</option> <option value="14">fourteen</option> <option value="15">fifteen</option> <option value="16">sixteen</option> <option value=
  • 添加属性以选择列表选项(Add attribute to select list option)
    问题 我在Razor视图的下拉列表中有一个项目列表。 在数据库中,每个项目都有3个与之相关的值-数据库ID,短名称(用于显示)和长名称(用于传递给服务)。 该下拉列表必须显示短名称,因此我将使用数据库ID作为值并以短名称作为文本来填充下拉列表。 然而,当用户选择,我需要通过长期的名称使用jQuery的查询参数搜索服务,例如,当科尔蒂纳入围“福特Cortina的1979年蓝”需求的项目要传递给服务。 我的第一个想法是将长名称存储为数据破折号属性,但我想知道是否有更好的方法。 所以 如何将所有3个值存储在下拉列表中? 如果我确实使用数据破折号属性,如何将所有LONG_NAME值合并到Html.DropDownListFor中,或以某种方式将其添加到下拉列表中? D B: CARID SHORT_NAME LONG_NAME 1 Viper Dodge Viper 1982 2 Boxster Porsche Boxster 2009 Black 3 Cortina Ford Cortina 1979 Blue 控制器助手创建下拉列表: public static IEnumerable<SelectListItem> GetSelectList(this IEFRepository repository, string typeName) { var vehicle =
  • HTML表单只读SELECT标记/输入(HTML form readonly SELECT tag/input)
    问题 根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。 因此,如果要阻止用户更改下拉菜单,则必须使用disabled 。 唯一的问题是禁用的HTML表单输入不会包含在POST / GET数据中。 模拟select标签的readonly属性并仍然获取POST数据的最佳方法是什么? 回答1 您应该使select元素保持disabled但还要添加另一个具有相同名称和值的隐藏input 。 如果重新启用SELECT,则应在onchange事件中将其值复制到隐藏输入并禁用(或删除)隐藏输入。 这是一个演示: $('#mainform').submit(function() { $('#formdata_container').show(); $('#formdata').html($(this).serialize()); return false; }); $('#enableselect').click(function() { $('#mainform input[name=animal]') .attr("disabled", true); $('#animal-select') .attr('disabled', false) .attr('name', 'animal'); $('#enableselect').hide()
  • jqgrid不正确地在编辑框中选择下拉选项值(jqgrid incorrect select drop down option values in edit box)
    问题 我正在使用表单编辑。 表单中有两个选择框。 一个选择框是国家,另一个选择框是州。 状态选择框取决于所选国家/地区,并将动态填充。 例如: 国家: 美国(选项值= 1) 英国(期权价值= 2) 美国的州: 阿拉巴马州(选项值= 1) 加利福尼亚(选项值= 2) 佛罗里达(选项值= 3) 夏威夷(选项值= 4) 英国的州: 伦敦(期权价值= 5) 牛津(选项值= 6) 如您所见,英国的Country id=2 (UK)以5开头。当我编辑包含Country id=2 (UK)和State id=6 (Oxford) ,编辑表单将正确显示-国家/地区是英国,国家是牛津。 但是,如果您下拉状态选择框,则选项文本正确(显示伦敦牛津),但选项值将从0开始。正确的是,选项值应从5开始。 如果您选择“国家”下拉框并将其更改为“美国”,然后再次更改为“英国”,则选项值将正确填充(从5开始)。 我的问题是,当加载编辑表单时,如何根据编辑框中的国家/地区为状态的选择框填充正确的选项值? 回答1 您问题的答案在一定程度上取决于来源,您可以从中获得“美国国家”和“英国国家”下显示的信息。 jqGrid支持两种可能性:1)使用editoptions的value参数2)使用dataUrl和buildSelect参数。 在本地编辑或可能选项列表为静态的情况下,第一种方法是最好的方法。
  • 从 Django 中的 FilteredSelectMultiple 小部件获取所选值(Get the chosen values from FilteredSelectMultiple widget in Django)
    问题 在 Django admin 中,有谁知道如何在保存表单时从 FilteredSelectMultiple 小部件中获取所选值? class ControllerForm(forms.ModelForm): terminal = forms.ModelMultipleChoiceField(queryset=[]) def __init__(self, *args, **kwargs): super(ControllerForm, self).__init__(*args, **kwargs) self.fields['terminal'].widget = widgets.FilteredSelectMultiple('terminals', False) self.fields['terminal'].help_text = "Select the terminals which are to be added to the group." self.fields['terminal'].required = False self.fields['terminal'].label = "Select terminal(s)" self.fields['terminal'].choices = [(t.id, str(t)) for t in Terminal
  • 我可以将必填属性应用于HTML5中的字段?(Can I apply the required attribute to <select> fields in HTML5?)
    问题 如何检查用户是否已从HTML5的<select>字段中选择了某些内容? 我看到<select>不支持新的required属性...那么我是否必须使用JavaScript? 还是我想念的东西? :/ 回答1 必填:将第一个值留空-需要对空值进行处理 先决条件:正确的html5 DOCTYPE和一个命名输入字段 <select name="somename" required> <option value="">Please select</option> <option value="one">One</option> </select> 根据文档(列表和粗体是我的) 必需属性是布尔属性。 指定后,将要求用户在提交表单之前选择一个值。 如果选择元素指定了必填属性, 没有指定多重属性, 且显示尺寸为1(SIZE = 2或更大-如果不需要,则将其忽略); 并且如果select元素的选项列表中的第一个option元素的值(如果有)是空字符串(即,以value="" ), 并且该option元素的父节点是select元素(而不是optgroup元素), 那么该选项就是选择元素的占位符标签选项。 回答2 根据规范, <select>元素确实支持required属性: http://dev.w3.org/html5/spec-author-view/the-select-element
  • 如何获得剑道 DropDownList 的选定值(how to get selected value for Kendo DropDownList)
    问题 我不知道如何确定在我的剑道下拉列表中选择了哪个项目。 我的观点将其模型定义为: @model KendoApp.Models.SelectorViewModel ViewModel 定义为: public class SelectorViewModel { //I want to set this to the selected item in the view //And use it to set the initial item in the DropDownList public int EncSelected { get; set; } //contains the list if items for the DropDownList //SelectionTypes contains an ID and Description public IEnumerable<SelectionTypes> ENCTypes } 在我看来,我有: @(Html.Kendo().DropDownList() .Name("EncounterTypes") .DataTextField("Description") .DataValueField("ID") .BindTo(Model.ENCTypes) .SelectedIndex(Model.EncSelected) ) 此
  • 在Html.DropDownlistFor中获取多个选定值(Getting Multiple Selected Values in Html.DropDownlistFor)
    问题 @Html.DropDownListFor(m => m.branch, CommonMethod.getBranch("",Model.branch), "--Select--", new { @multiple = "multiple" }) @Html.DropDownListFor(m => m.division, CommonMethod.getDivision(Model.branch,Model.division), "--Select--", new { @multiple = "multiple" }) 我有两个DropDownListFor实例。 对于那些以前存储了Model.branch和Model.division值的对象,我想将其设置为true。 这些是存储的ID的字符串数组 class CommonMethod { public static List<SelectListItem> getDivision(string [] branchid , string [] selected) { DBEntities db = new DBEntities(); List<SelectListItem> division = new List<SelectListItem>(); foreach (var b in branchid) { var