Html 选择可选选项

对不起，我的英语不好。因此，我的问题描述得非常简短

我在“黄金”的第一个选择列表中点击，列表3“乐团”（999er，999er，999er……）

我在第一个选择列表中单击“Silber”，列表3“legerung”变为其他单词（333er，666er…）

因此第三个列表取决于第一个列表的选择。

有人知道我怎么做吗

多谢各位

戈德雷奇纳


Wä；你是埃德尔梅泰尔吗
黄金
锡伯
普拉廷
钯

格威奇森海特
格拉姆

盖威奇

勒吉朗
999er
999er
999er
999er
999er
999er
999er
999er

0.00欧元

下面是一个使用jQuery的解决方案：

它当前所做的只是根据在第一个选择元素中选择的选项来交换第三个选择元素中每个选项的文本，但您可能还希望更改每个选项的值或ID，以便能够单独识别每个选项

工作小提琴：

---

一些有帮助的链接：。对于#2，请查看源代码。基本技术是分别存储选项的数据（例如，在javascript数组中），并在控件选择更改时使用

Option

构造函数重置动态选择的选项。这仅在所有选择都有7个选项时才有效。它甚至在小提琴上都不起作用（最后一个，第八个选项不会被替换）。谢谢。正是我要找的。@numbers1311407-对，上面只是一个例子，告诉你这是怎么可能的。他/她现在可以修改它以使用自己的应用程序。user20298089-请点击答案左上角的复选框接受答案-谢谢！

<div class=" goldrechner">

        <div id="calculator">
            <form name=" goldrechner-form" class=" goldrechner-form">
            <input name="pt" value="1650" id="pt" type="hidden">
            <input name="pc" value="100" id="pc" type="hidden">
            <input name="ex" value="1.0048" id="ex" type="hidden">
            <div class=" goldrechner-header">
                <h2>Goldrechner</h2>
            </div>

            <ul>
                <li>
                <label class="desc" for="gr_em">
                    <span>W&auml;hlen Sie Ihr Edelmetall aus</span>
                                <div>
            <select id="gr_em" name="gr_em" tabindex="1">

<option selected="selected" value="gold">Gold</option>
<option value="silber">Silber</option>
<option value="platin">Platin</option>
<option value="palladium">Palladium</option>


    </select>

            </div>

            <li>

            <label class="desc" for="gc-unit" >
            <span>Gewichtseinheit</span>

            <div>
            <select id="gc-unit" name="gc-unit" tabindex="2">
<option selected="selected" value="gramm">Gramm</option>

    </select>

         </div>

            <li class="colf">
            <label class="desc" for="gr_gewicht" >
            <span>Gewicht</span>
            <div>
            <input id="gr_gewicht" name="gr_gewicht" class="small" tabindex="3" onkeyup="" type="text">

            <li class="colr">
            <label class="desc" for="gc-purity">
            <span>Legierung</span>
                            <div>
            <select id="gc-purity" name="gc-purity" tabindex="4">

<option selected="selected" value=".75">999er</option>
<option value=".917*.725">999er</option>
<option value=".725*.8">999er</option>
<option value=".725*.75">999er</option>
<option value=".725*.585">999er</option>
<option value=".725*.417">999er</option>
<option value=".65*.375">999er</option>
<option value=".65*.333">999er</option>
                    </select>
            </div>

            <li class="worthresult">
                <div class="result">
                    <span class="num">0.00 Euro</span>
                </div>
            </li>

$(document).ready(function(){
//Monitor first select element for change in selected option
$('select#gr_em').on('change', function(){
    console.log('changed');
    //Change 3rd select text if gold option selection
    if($('option:selected', this).val() === 'gold'){
        $('select#gc-purity option:eq(0)').text('Gold - New Option 1');
        $('select#gc-purity option:eq(1)').text('Gold - New Option 2');
        $('select#gc-purity option:eq(2)').text('Gold - New Option 3');
        $('select#gc-purity option:eq(3)').text('Gold - New Option 4');
        $('select#gc-purity option:eq(4)').text('Gold - New Option 5');
        $('select#gc-purity option:eq(5)').text('Gold - New Option 6');
        $('select#gc-purity option:eq(6)').text('Gold - New Option 7');
    }
    //Change 3rd select text if silber option selection
    else if($('option:selected', this).val() === 'silber'){
        $('select#gc-purity option:eq(0)').text('Silber - New Option 1');
        $('select#gc-purity option:eq(1)').text('Silber - New Option 2');
        $('select#gc-purity option:eq(2)').text('Silber - New Option 3');
        $('select#gc-purity option:eq(3)').text('Silber - New Option 4');
        $('select#gc-purity option:eq(4)').text('Silber - New Option 5');
        $('select#gc-purity option:eq(5)').text('Silber - New Option 6');
        $('select#gc-purity option:eq(6)').text('Silber - New Option 7');          
    }
    //Change 3rd select text if platin option selection
    else if($('option:selected', this).val() === 'platin'){
        $('select#gc-purity option:eq(0)').text('Platin - New Option 1');
        $('select#gc-purity option:eq(1)').text('Platin - New Option 2');
        $('select#gc-purity option:eq(2)').text('Platin - New Option 3');
        $('select#gc-purity option:eq(3)').text('Platin - New Option 4');
        $('select#gc-purity option:eq(4)').text('Platin - New Option 5');
        $('select#gc-purity option:eq(5)').text('Platin - New Option 6');
        $('select#gc-purity option:eq(6)').text('Platin - New Option 7');           
    }
    //Change 3rd select text if palladium option selection 
    else if($('option:selected', this).val() === 'palladium'){
        $('select#gc-purity option:eq(0)').text('Palladium - New Option 1');
        $('select#gc-purity option:eq(1)').text('Palladium - New Option 2');
        $('select#gc-purity option:eq(2)').text('Palladium - New Option 3');
        $('select#gc-purity option:eq(3)').text('Palladium - New Option 4');
        $('select#gc-purity option:eq(4)').text('Palladium - New Option 5');
        $('select#gc-purity option:eq(5)').text('Palladium - New Option 6');
        $('select#gc-purity option:eq(6)').text('Palladium - New Option 7');        
    }
});
});