0

私の悪い英語でごめんなさい。したがって、私は私の問題を非常に短く説明します。

「Gold」の最初の選択リスト、リスト 3「Legierung」 (999er、999er、999er ......) をクリックします。

「 Silber 」の最初の選択リストをクリックすると、リスト 3 の「Legierung」が他の単語(333er、666er .....) になります。

したがって、3 番目のリストは最初のリストの選択に依存します。

どうすればそれができるか知っている人はいますか？

ありがとうございました。

http://jsfiddle.net/HvmyK/

<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>
4

1 に答える 1

0

jQueryを使用したソリューションは次のとおりです。

現在行っているのは、最初の選択要素で選択されているオプションに応じて、3 番目の選択要素の各オプションのテキストを交換することだけですが、各オプションの値または ID を変更して、それぞれを識別できるようにすることもできます。個別に。

作業フィドル: http://jsfiddle.net/HvmyK/2/

$(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');        
    }
});
});
于 2013-01-31T17:15:14.270 に答える