天道酬勤,学无止境

Have a select menu select a value in another select menu with Jquery Mobile [duplicate]

问题

当用户选择一个选项时,我试图让优先级下拉菜单动态更改另一个下拉菜单的值。 我正在使用 Jquery Mobile,但不确定如何实现这一点。 这是我目前的 HTML。 因此,如果我选择优先级正常,我会喜欢它,所以在 commETA 和 compETA 选择框中选择 48 小时。 提前感谢您的帮助!

回答1

编辑:正如 Omar 在评论中所说, val()应该可以正常工作 - 正确的过滤器是:selected

$("select").each(function(idx) {
  var selectedValue = $(this).find("option").filter(":selected").attr("value");
});

EDIT2:初始selected属性

受限制的 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>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Have a select menu select a value in another select menu with Jquery Mobile [duplicate]
    This question already has an answer here: How can I programmatically change a select box selection from within the control's own change event and have it work in mobile browsers (1 answer) Closed 4 years ago. I am trying to have a priority level dropdown menu change a value of another dropdown menu dynamically when the user selects an option. I am using Jquery Mobile and not sure how I would go about making this happen. Here is my HTML currently. So if I choose priority level Normal I would like it so select 48 Hours in the commETA and compETA select boxes. Thanks in advance for any help!
  • Redirect on change of large select menu in jQuery Mobile
    I'm having an issue with trying to redirect to another page when a user selects an option from a <select> menu in jQuery Mobile. Below is a very small example similar to what I'm trying to do that demonstrates the issue I'm having. The problem is that when the list of options is too big to fit on the screen, the redirect does not work. It works fine when the options fit on the screen. (You can reproduce this in a desktop browser by making your window really small.) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title
  • 重定向 jQuery Mobile 中大选择菜单的更改(Redirect on change of large select menu in jQuery Mobile)
    问题 当用户从 jQuery Mobile 的<select>菜单中选择一个选项时,我在尝试重定向到另一个页面时遇到问题。 下面是一个非常小的例子,类似于我正在尝试做的事情,它展示了我遇到的问题。 The problem is that when the list of options is too big to fit on the screen, the redirect does not work. It works fine when the options fit on the screen. (您可以通过使窗口非常小来在桌面浏览器中重现这一点。) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  • 如何“关闭”jQuery Mobile 的样式下降?(How to “turn off” jQuery Mobile's styling of <select> drop downs?)
    问题 我需要关闭 jQuery Mobile 的<select>下拉样式。 最终,我希望设备本身(iPhone、Android、Blackberry 等)来确定<select>下拉列表的外观。 目前我的标记是(出于显示目的减少了选项数量): <div data-role="fieldcontain"> <label for="state">State:</label> <select name="state" id="state" data-role="none"> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN" selected="selected">Minnesota</option> <option value="MS">Mississippi</option> </select> </div> 我尝试在<select>上使用data-role="none"但没有任何改变。 有没有办法只为选择下拉菜单“关闭”jQuery Mobile? 回答1 根据 http://jquerymobile.com/test/docs/forms/docs-forms.html 如果您希望 jQuery Mobile 不涉及某个特定的表单控件
  • Changing the Selected value of Select Menu Jquery Mobile
    I have created a form and have stored the values selected by the user in a database. But now if the user wants to edit his form, i need to reload the form with the previous values.I am using JQUERY MOBILE I retrieved his previous values from the database but now i am having a problem with loading the values in a select Menu.Can anyone help me ? I have used the following code :- var nameVar = (dataset.item(id)['name']); // Getting the name from the database $('#StateName').val(nameVar); // StateName is the id $('#StateName').selectmenu('refresh', true); // Refreshing the Select Menu But even
  • JSF Ajax 渲染丢失 CSS 与 Jquery Mobile(JSF Ajax render lose CSS with Jquery Mobile)
    问题 我正在使用 ajax 使用 Jquery Mobile 进行编程,这很好,直到我尝试使用 ajax 来呈现某些东西:( 我正在尝试做 ah:selectOneMenu 当我选择另一个 h:selectOneMenu 时刷新项目,并将其放入 ah:panelGroup 中工作。 但是,当执行ajax,并且更新panelGroup时,selectOneMenu失去了JM css并变得丑陋。 我正在使用 jsf 2.2 和 Jquery Mobile 1.4 Beta 前: 后: 这是我的页面。 我猜这个 bean 不符合要求,因为 ajax 正在工作并且 selectonemenu 正确呈现项目。 问题只是css: <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" > <ui:composition > <h:head> <title>Manager</title> <meta name=
  • JSF Ajax render lose CSS with Jquery Mobile
    I'm using ajax to programming with Jquery Mobile, and it was good, ultil I try use ajax to render something :( I'm trying to do a h:selectOneMenu refresh the items when I select another h:selectOneMenu, and I put it inside a h:panelGroup to work. However, when the ajax is executed, and the panelGroup is updated, the selectOneMenu lose the JM css and become ugly. I'm using jsf 2.2 and Jquery Mobile 1.4 Beta Before: After: This is my page. I guess the bean doesn't metter, because the ajax is working and the selectonemenu is correct render the items. The problem is just the css: <?xml version='1
  • 我很喜欢研究这些比较酷的效果
    jQuery对比图片放大镜查看代码 https://www.mk2048.com/demo/demo_target_desc.php?id=hhcck2ihj 简单的jQuery通过放大镜查看两张图片对比代码(不兼容IE6,7,8) 使用说明: 将两张图片分别定义class为:rightImg与laftImg,放到两个DIV容器中。图片布局需调整为左右分布。 使用如下JS即可,//第一个参数是对应的对比图class 第二个参数是放大倍数 $(document).ready(function(){ $(".laftImg").blowup("rightImg",1); $(".rightImg").blowup("laftImg",1); }); js手机注册表单验证代码点击》 js手机注册表单验证代码 js手机端简单的用户名、密码、手机、发送验证码表单验证代码 js css3图片爆炸轮播切换效果点击》 js css3图片爆炸轮播切换效果 js利用css3-transform,JSDOM操作实现图片爆炸切换效果。一款酷炫的图片轮播代码。修改图片:var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];(不兼容IE6,7,8) jQuery水平滑动手风琴展开详情代码 https://www.mk2048.com/demo
  • 如何修复jQuery mobile子菜单中标题下方的搜索字段(How to fix search field below header in submenu of jQuery mobile)
    问题 我有一个主菜单,单击主菜单会打开一个包含多个项目的子菜单。 sub-header下方是search-field 。 我想修复sub-header下方的search-field ,以便它不再滚动所有选项。 我不确定这是否可以用 CSS 来完成。 我没有通过添加overflow-y: scroll to .ui-input-search让它工作。 $(document).on("pagecreate", "#demo-dialog", function(e) { var form = $("<form><input data-type='search'/></form>"), page = $(this); $(".ui-content", this) .prepend(form); form.enhanceWithin() .on("keyup", "input", function() { var data = $(this).val().toLowerCase(); $("li", page).addClass("ui-screen-hidden") .filter(function(i, v) { return $(this).text().toLowerCase().indexOf(data) > -1; }).removeClass("ui-screen-hidden
  • Jquery - 选择菜单项后需要额外点击(Jquery - Extra click required after selecting menu item)
    问题 在你们拯救了很多天之后,第一次在这里发帖 我正在使用 PhoneGap (jquery + html) 开发我的第一个移动应用程序(一种计算器/转换器)。 我主要是一个 .NET 开发人员。 几年经验。 我想要做的就是在单击一个项目后隐藏菜单,最终在 .toggle() 和 .slideToggle() 对我来说不能正常工作后管理。 但是,当我在菜单上进行选择时,它可以正常工作(在浏览器和 phonegap 中),除非在执行后我必须在页面上的任何地方额外单击一次,就好像焦点设置在其他地方一样。 我认为这可能与 &ui-state=dialog 有关,但是我在 pageChange 上将 changeHash 设置为 false 并将其从 URL 中删除,但行为保持不变。 在搜索过去的线程等方面,我已经尽力了。任何帮助将不胜感激:) <a href="#hamburgerPopup" id="burgerLogo" data-rel="popup" data-transition="slide" aria-haspopup="true" aria-owns="popupMenu" aria-expanded="false"> <img src="hamburger.png" style="width:50%;" /> </a> <div data-role="popup" id
  • Jquery Mobile issue with long select multiple option and data-native-menu="false"
    I am using the jquery 1.9.1 js and jquery mobile 1.3.2 css and js. I have a page with a long selectbox, 20 items. When I open the selectbox, choose some items and close it again, I end up with a blank page. Has anyone had this problem? With jquery mobile 1.3.1 there was the problem that the selectbox was empty when you opened it for the second time, but this is no improvement. EDIT: This the code on my page: <div data-role="page" id="new_agent_edit" data-theme="d" qs=""> <div data-role="header" data-theme="b"> <h1>New Agent Edit</h1> </div> <div id="new_agent_editContent" data-role="content">
  • 长选择多个选项和 data-native-menu="false" 的 Jquery Mobile 问题(Jquery Mobile issue with long select multiple option and data-native-menu="false")
    问题 我正在使用 jquery 1.9.1 js 和 jquery mobile 1.3.2 css 和 js。 我有一个带有长选择框的页面,有 20 个项目。 当我打开选择框,选择一些项目并再次关闭它时,我最终得到一个空白页。 有人遇到过这个问题吗? jquery mobile 1.3.1 出现第二次打开时选择框为空的问题,但这并没有改善。 编辑: 这是我页面上的代码: <div data-role="page" id="new_agent_edit" data-theme="d" qs=""> <div data-role="header" data-theme="b"> <h1>New Agent Edit</h1> </div> <div id="new_agent_editContent" data-role="content"> <div> <h2 style="display:inline">Agent #Test Agent</h2><br/> </div> <div> <form id="frmAgentNewEdit" name="frmAgentNewEdit"> <div data-role="fieldcontain"> <label for="new_agent_editsubscribers" class="select">Publishes To:<
  • jQuery Mobile 选择菜单在弹出窗口中的任意位置点击打开(jQuery Mobile Select Menu open on tap anywhere in Popup)
    问题 我在弹出窗口中打开了一个简单的表单: <div data-role="popup" id="request-form" data-dismissible="false"> <div class="ui-header"> <h2>Request Holiday</h2> </div> <div> <div data-role="fieldcontain" class="single-day"> <label><b>Date</b>: <span id="date"></span></label> <select id="half-day"> <option value="Full">Full Day</option> <option value="Morning">Morning Only</option> <option value="Afternoon">Afternoon Only</option> </select> </div> <button id="request-button" data-theme="B">Request</button> <button id="cancel-button" data-rel="back">Cancel</button> </div> </div> 效果很好,除了当我单击 iOS 中的任一按钮或标签或标题时,选择菜单会弹出 -
  • How to make a custom select box with filter using jQuery Mobile?
    I am having a problem with jQuery Mobile. I want to make a custom select box with search option on the top like in the ul of jQuery mobile. I have made a custom select box using jQuery mobile but cannot add the search bar on it. I want exactly the thing like this: http://jsfiddle.net/sEMyT/2/ <!DOCTYPE html> <html> <head> <link class="jsbin" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" /> <script class="jsbin" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script class="jsbin" src="https://github.com/downloads/aliok/jquery
  • jQuery Mobile 1.1.1自定义选择菜单-占位符文本不可见(jQuery Mobile 1.1.1 Custom Select Menu - Placeholder Text not Visible)
    问题 在今天早些时候(2012年7月13日)升级到jQuery Mobile 1.1.1之后,我注意到我的所有“自定义选择”菜单都不再在页面加载时显示占位符文本。 我需要在1.1.1中做些不同的事情以在自定义选择菜单中显示占位符文本吗? 帮助!?!? 这是我的代码示例: <div data-role="fieldcontain" class="ui-hide-label no-field-separator"> <label for="ceiling" class="select" data-theme="a">Ceiling</label> <select name="ceiling" id="ceiling" data-theme="a" data-native-menu="false" class="required"> <option data-placeholder="true">Ceiling (Yes/No)</option> <option value="Yes">Ceiling: Yes</option> <option value="No">Ceiling: No</option> </select> </div> 示例图片(黑条是我的自定义选择菜单): 回答1 这段代码为我工作: <select> <option value="" data
  • 选择下拉列表中的 jQuery Mobile 缩略图列表(jQuery Mobile Thumbnail list in a Select Drop Down)
    问题
  • 如何启用和禁用选择菜单 JQuery 移动(How to enable and disable selectmenu JQuery mobile)
    问题 我有一个使用 jquery mobile 生成的表单。 我有一个最初设置为禁用的下拉列表。 <div data-role="fieldcontain"> <label for="role-edit" class="select">Project Role:</label> <select name="role-edit" id="role-edit" data-native-menu="false" disabled="disabled" class="edit-projectinput"> <option value="Admin">Admin</option> <option value="Project Manager">Project Manager</option> <option value="User">User</option> </select> </div> 我想使用 jquery 启用禁用的选择菜单。 我试过 $(".edit-projectinput").selectmenu("enable"); 但这对我不起作用。 您能否指导我如何启用禁用的选择菜单,如果可能,请告诉我如何禁用一个。 这是演示:http://jsfiddle.net/lightbringer/dpv2h/1/ 回答1 做就是了 : $(document).ready(function
  • iOS中的jQuery Mobile下拉菜单错误(jQuery Mobile dropdown menu bug in iOS)
    问题
  • jQuery Mobile dropdown menu bug in iOS
    I have got bug reports on a jQuery Mobile project beta 2 project with dropdown menu (select tags in html) that says when the scroll the wheel on the native "select value" in a dropdown menu its zooming the page and when selected a value its not being set back, the user need to tap to get normal zoom again. I only has Android to test on, is there someone else that got the same problem and have a solution for it or is it a bug in iOS or jQuery Mobile?
  • jQuery Mobile Select Menu open on tap anywhere in Popup
    I have a simple form I'm opening inside a popup: <div data-role="popup" id="request-form" data-dismissible="false"> <div class="ui-header"> <h2>Request Holiday</h2> </div> <div> <div data-role="fieldcontain" class="single-day"> <label><b>Date</b>: <span id="date"></span></label> <select id="half-day"> <option value="Full">Full Day</option> <option value="Morning">Morning Only</option> <option value="Afternoon">Afternoon Only</option> </select> </div> <button id="request-button" data-theme="B">Request</button> <button id="cancel-button" data-rel="back">Cancel</button> </div> </div> Which works