Question

目前我正在尝试根据动态填充（来自数据库），可靠的下拉菜单中的值来加载内容。到目前为止，这是我的方法：

[CODE]

$(function() {

$('.update').on('change', function() {
    formObject.run($(this));
    var value=$(this).val();
    var optionVal = $( "#thirdSelection option:selected" ).text(); //or .val()


    //RELEVANT PART 

    switch(optionVal){

        case "optionVal" :
            $( '#loadTargetInside' ).load( 'targetFolder/targetUrl.htm #targetId');
        break;

        case "optionVal" :
            $( '#loadTargetInside' ).load( 'targetFolder/targetUrl.htm #targetId');
        break;

        //AND SO ON 

    }      

});

});

[CODE]

上面的例子工作正常，但我想知道是否有更有效的方法来写这个？由于有很多选择选项，我希望避免编写这么多切换案例。

理想情况下，这是将下拉列表中的当前选定值与加载的内容文件中的元素id / value / data-attribute进行比较的过程。如果匹配，它将加载相关内容。如果不提前加载内容，我不确定是否可以。

根据要求提供HTML：

    <?php require_once('php/dbconnect.php'); ?> 
    <!DOCTYPE HTML>
    <html lang="en">
        <head>
            <title>Title</title>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="css/style.css" />
        </head>
        <body>
        <div id="formWrapper">

            <form action="" method="post">

                <select name="firstSelection" id="firstSelection" class="update">
                    <option value="">Select Application</option>
                    <?php if (!empty($list)) { ?>
                        <?php foreach($list as $row) { ?>
                            <option value="<?php echo $row['id']; ?>">
                                <?php echo $row['name']; ?>
                            </option>
                        <?php } ?>
                    <?php } ?>
                </select>

                <select name="secondSelection" id="secondSelection" class="update" disabled="disabled">
                    <option value="">----</option>
                </select>

                <select name="thirdSelection" id="thirdSelection" class="update" disabled="disabled">
                    <option value="">----</option>
                </select>

            </form>

            </div>

        <div id="wrapperArticle">

          <div id="#loadTargetInside" class="targetContainer"></div>

        </div>

        <script src="js/jquery-1.12.4.min.js"></script>
        <script type="text/JavaScript" src="js/core.js"></script>


    </body>
</html>

我很感激你的建议。

AJAX从下拉菜单中加载内容

0 个答案: