堆栈内存溢出
  简体   繁体   English

根据先前的选项动态更改选择框选项

[英]Dynamically change selectbox options based on previous option selection

 原文  2012-09-26 15:48:27  1   3    javascript/ jquery/ html/ ajax

问题描述

What I am trying to accomplish is the following... HTML 我想要完成的是以下内容……HTML 

<!doctype html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>



    <select name="dateselector_parent" id="dateselector_parent" tabindex="1">
        <option value="">--Select Date--</option>
        <option value="1">2012</option>
        <option value="1">2011</option>
        <option value="1">2010</option>
        <option value="2">Predefined Dates</option>
    </select>

    <select name="dateselector_child" id="dateselector_child" tabindex="2">
        <option value="">--Select Date--</option>
        <option value="1">January</option>
        <option value="1">February</option>
        <option value="1">March</option>
        <option value="1">April</option>
        <option value="1">May</option>
        <option value="1">June</option>
        <option value="1">July</option>
        <option value="1">August</option>
        <option value="1">September</option>
        <option value="1">October</option>
        <option value="1">November</option>
        <option value="1">December</option>
        <option value="2">Current Month</option>
        <option value="2">Month to Date</option>
        <option value="2">Last 7 Days</option>
    </select>


    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
    <script type="text/javascript" src="js/datejs.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#dateselector_parent").selectbox();
        $("#dateselector_child").selectbox();
    });


    </script>
</body>

This creates two select boxes, I want one box to display content according to what the user chooses on the other one. 这将创建两个选择框，我希望一个框根据用户在另一个上的选择显示内容。 For example, if the user chooses, 2010 or 2011 or 2012, I want to display Jan-Dec as options on the second one. 例如，如果用户选择2010或2011或2012，则我想在第二个选项中显示Jan-Dec作为选项。 If the user chooses, Predefined Dates, I want to display Current Month, Month to Date, and Last 7 Days. 如果用户选择“预定义日期”，则我要显示“当前月”，“截止日期”和“过去7天”。 The javascript plugin I'm using allows the user to define the onChange, onOpen, and onClose methods. 我正在使用的javascript插件允许用户定义onChange，onOpen和onClose方法。 I have been doing some research and it appears that AJAX is involved in trying to accomplish this, but since I don't know one bit of PHP I would like to know if it's possible to accomplish this with jQuery. 我一直在做一些研究，看来AJAX参与了尝试实现这一目标的方法，但是由于我不了解PHP的一点点，所以我想知道是否有可能使用jQuery完成此工作。 (I have attempted to solve this problem with no luck of course, I am not looking for someone to do it for me, I just want to be pointed in the right direction, whether I can accomplish this with jQuery or if it's necessary to use AJAX since I haven't seen an example online with only jQuery). （当然，我试图解决这个问题没有运气，我不是在找别人为我做这件事，我只是想指出正确的方向，无论我是否可以使用jQuery完成此操作，或者是否有必要使用AJAX，因为我还没有看到仅使用jQuery的在线示例）。

Any help will be appreciated 任何帮助将不胜感激

3 个解决方案

解决方案1
 1 已采纳  2012-09-27 09:21:16

I hope the following work for your requirement. 希望以下工作能满足您的要求。 Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options 具有3个子下拉菜单（无div）1.-选择-，2.十二月至十二月3.其他选项 

$().ready(function () {

    var selectedOnLoad = $('#dateselector_parent').val();
    setChild(selectedOnLoad);

    $('#dateselector_parent').change(function () {
       var selectedValue = $('#dateselector_parent').val();
       setChild(selectedValue);
    });

});

function setChild(value){
    //Have your three child selector names as follows in your markup as well and assuming they are not in divs
    var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];

    jQuery.each(arr, function() {
            if(this == "dateselector_child_" + value){
                $("#" + this).show();
            }else{
                $("#" + this).hide();
            }
     });
}

UPDATE: Adding markup for the above script 更新：为上述脚本添加标记 

<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
    <option value="">--Select Date--</option>
    <option value="1">2012</option>
    <option value="1">2011</option>
    <option value="1">2010</option>
    <option value="2">Predefined Dates</option>
</select>


<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
    <option value="">--Select Date--</option>
</select>

<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
    <option value="">--Select Date--</option>
    <option value="1">January</option>
    <option value="1">February</option>
    <option value="1">March</option>
    <option value="1">April</option>
    <option value="1">May</option>
    <option value="1">June</option>
    <option value="1">July</option>
    <option value="1">August</option>
    <option value="1">September</option>
    <option value="1">October</option>
    <option value="1">November</option>
    <option value="1">December</option>
</select>

<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
    <option value="">--Select Date--</option>
    <option value="2">Current Month</option>
    <option value="2">Month to Date</option>
    <option value="2">Last 7 Days</option>
</select>

Check the setChild(value) function. 检查setChild（value）函数。 Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. 当页面准备就绪时（加载后），并且当用户更改选择时，Parent的选择值将传递给该函数。 Parent's selected value could be "","1","2". 父母的选择值可以是“”，“ 1”，“ 2”。 Next the foreach loop finds the name of the child that needs to show and others are hidden. 接下来，foreach循环找到需要显示的孩子的名字，其他孩子则被隐藏。 if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden. 如果用户选择父项的--- Select ---选项，则该函数将显示“ dateselector_child_”，而其他两个则隐藏。

Hope it's clear now.... 希望现在清楚了...

解决方案2
 0  2012-09-26 15:56:26

Just a startingpoint! 只是一个起点！ 

$("#dateselector_parent").change(function() {
    $('#dateselector_child').val($(this).find("option:selected").index());
});

Demo 演示

解决方案3
 0  2012-09-26 16:05:33

AJAX, expands to Asynchronous JavaScript And XML. AJAX，扩展为异步JavaScript和XML。 It involves writing an XMLHTTPRequest to retrieve the contents from a server. 它涉及编写XMLHTTPRequest以从服务器检索内容。

If you can store your logic (what to display when a certain option is chosen) in a few lines of code, you can embed it in JavaScript or jQuery. 如果可以在几行代码中存储逻辑（选择某个选项时显示的内容），则可以将其嵌入JavaScript或jQuery中。

So, in your case, it is not necessary to use AJAX. 因此，就您而言，没有必要使用AJAX。 You can accomplish this with a bit of code in JavaScript. 您可以使用JavaScript中的一些代码来完成此操作。

" Creating a 2 level interdependent select list " might help. “ 创建一个二级相互依赖的选择列表 ”可能会有所帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在选择框中选择其他选项时更改数字值 - Change number value on selection of different option in selectbox 如何基于另一个选择中的选择选项更改一个选择中的选项 - how to change options in a selection based on the chosen option in another selection 基于先前选择的条件列表选项 - Conditional list options based on previous selection 如何在选择框中动态分组选项 - how to dynamically group options in selectbox 如何基于上一个选择列表的选择选项更改选择列表中的选项？ - How to change options in a select list, based on the selected option of a previous select list? 在img点击更改选择框选择 - Change selectbox selection on img click 选项选择以动态更改下一个选择 - Option select to dynamically change next selection selectbox选项列表更改检测到其他selectbox更改未检测到更改 - selectbox option list change detection on other selectbox change not detecting the change 使用javascript动态创建selectbox选项 - Dynamically creating options for selectbox using javascript 动态添加到选择框的选项不会删除 - Dynamically added options to selectbox do not delete
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM