Javascript 如何在动态下拉列表中锁定第一个select下拉列表，并且仍然从中获取数据

我正在制作一个摄影网站的服务请求模块。主要想法是在第一个下拉列表（婚礼、首次亮相等）中选择一项服务，并根据选择，为套餐选择第二个下拉列表（每个套餐的价格和功能不同）。选择一个软件包将提供一个文本，详细说明该软件包的功能，如下图所示

现在有一个缺陷，我不知道在哪里改变。你看，在图中，如果我尝试更改服务，第二个下拉菜单将重置，但文本仍保留

我现在想要的是在选择避免在出现第二个下拉列表时更改它之后锁定第一个下拉列表。然后，我只需要提供一个重置按钮来重置表单（我也需要帮助）

这是我当前的代码：

HTML

<div id="wrap">
    <select id="Service" title="" name="Service">
        <option value="" selected hidden>Choose Service ...</option>
        <option value="wedding">Wedding</option>
        <option value="debut">Debut</option>
        <option value="children-party">Children's Party</option>
    </select>

    <div class="first-level-select">
        <div class="wedding">
            <select class="second-level-select">
                <option value="" selected hidden>Choose package ...</option>
                <option value="wedding-package-1">Package 1</option>
                <option value="wedding-package-2">Package 2</option>
        </div>
        <div class="debut">
            <select class="second-level-select">
                <option value="" selected hidden>Choose package ...</option>
                <option value="debut-package-1">Package 1</option>
                <option value="debut-package-2">Package 2</option>
        </div>
    </div>

    <div class="second-level-container">
        <div class="wedding-package-1">
        Php 8,000 <br><br>
        Unlimited shots stored in DVD <br>
        Edited video with 2 sets of DVD <br>
        MTV 4 to 5 minutes (Highlight video)
        </div>
        <div class="wedding-package-2">
        Php 15,000 <br><br>
        Unlimited shots stored in DVD <br>
        Magazine type album (20 pages, 100 pictures) <br>
        Edited video with 2 sets of DVD  <br>
        MTV 4 to 5 minutes (Highlight video)
        </div>
    </div>

问题是，每当我尝试在select下拉列表中添加onchange事件时，就会发生这种情况

当我在下拉列表中的一个选项中使用disabled（禁用）时也会发生这种情况（这就是为什么我使用hidden）

如果有人能帮忙，我将不胜感激。我还想知道如何从下拉列表中获取输入，以便抛出到数据库中供管理员批准。是否也可以抛出其他不在下拉列表中的数据，比如只在文本中显示但应作为INT类型抛出到数据库的包的价格

---

先谢谢你

嗨，对不起，我不太明白错误在哪里？您是否仍希望从第一个下拉列表中获取数据，但无法更改选择或其他内容？不，先生。我举个例子。您可以查看上面的“示例”图像。假设我选择了婚礼服务。婚礼套餐可以在下一个下拉列表中选择。然后我选择了包2。然后会出现一个文本，显示该特定包的详细信息。现在，当我在这段时间内突然更改服务时，例如，如果我将服务更改为首件服务，包下拉列表将重置，现在将显示首件包的选择。但婚礼套餐2的文本将保留。这就是错误所在。这就是我想锁定服务下拉列表的原因。这样，我就可以绕过这个bug。但当我执行onchange disabledrop时，整个系统都会崩溃，如“错误”图像所示。包装详细信息的文本显示时没有选择任何内容。我明白了。好吧，这看起来可以通过我目前的知识水平来解决，但也许你能给我发封电子邮件吗？评论在这里是不够的，因为我需要更多的信息和更多的空间。：）我会尽快的。我还发布了一个类似但更详细的问题。这是链接：请阅读以了解更多，因为我认为我昨天匆忙提出了这个问题。谢谢嗨，对不起，我不太明白错误在哪里？您是否仍希望从第一个下拉列表中获取数据，但无法更改选择或其他内容？不，先生。我举个例子。您可以查看上面的“示例”图像。假设我选择了婚礼服务。婚礼套餐可以在下一个下拉列表中选择。然后我选择了包2。然后会出现一个文本，显示该特定包的详细信息。现在，当我在这段时间内突然更改服务时，例如，如果我将服务更改为首件服务，包下拉列表将重置，现在将显示首件包的选择。但婚礼套餐2的文本将保留。这就是错误所在。这就是我想锁定服务下拉列表的原因。这样，我就可以绕过这个bug。但当我执行onchange disabledrop时，整个系统都会崩溃，如“错误”图像所示。包装详细信息的文本显示时没有选择任何内容。我明白了。好吧，这看起来可以通过我目前的知识水平来解决，但也许你能给我发封电子邮件吗？评论在这里是不够的，因为我需要更多的信息和更多的空间。：）我会尽快的。我还发布了一个类似但更详细的问题。这是链接：请阅读以了解更多，因为我认为我昨天匆忙提出了这个问题。谢谢

$(document).ready(function() {
$('#Service').bind('change', function() {
    var elements = $('div.first-level-select').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
                }
        }).trigger('change');

$('.second-level-select').bind('change', function() {
        var elements = $('div.second-level-container').children().hide(); // hide all the elements
        var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
               }
        }).trigger('change');
    });