javascript - 更改所选选项功能的输入

Question

我有 3 个选择，当用户选择一个选项时，关联值将显示在输入中。我只想对这 3 个选择使用一个函数，但我遇到了一些问题。这是我的 HTML :

<select name="codeLun" id="code" onChange="ModifChamp()">
                    <option value="901549J01" class="Lun">901549J01</option>
                    <option value="901549P13" class="Lun">901549P13</option>
                    <option value="901549P17" class="Lun">901549P17</option>
                    <option value="repos" class="Lun">Repos</option>
                    <option value="autre" class="Lun">Autres</option>
        </select>
<select name="codeMar" id="code" onChange="ModifChamp()">
                    <option value="901549J01" class="Mar">901549J01</option>
                    <option value="901549P13" class="Mar">901549P13</option>
                    <option value="901549P17" class="Mar">901549P17</option>
                    <option value="repos" class="Mar">Repos</option>
                    <option value="autreMar" class="Mar">Autres</option>
        </select>
<select name="codeMer" id="code" onChange="ModifChamp()">
                    <option value="901549J01" class="Mer">901549J01</option>
                    <option value="901549P13" class="Mer">901549P13</option>
                    <option value="901549P17" class="Mer">901549P17</option>
                    <option value="repos" class="Mer">Repos</option>
                    <option value="autreMer" class="Mer">Autres</option>
        </select>
<input class="text" readonly="readonly" type="text" name="heureLun" id="heureLun" value=""/>
<input class="text" readonly="readonly" type="text" name="heureMar" id="heureMar" value=""/>
<input class="text" readonly="readonly" type="text" name="heureMer" id="heureMer" value=""/>

还有我的JS:

function ModifChamp()
        {
            var conceptName = $('#code').find(":selected").attr('class');
            var codeDay = "heure"+conceptName;
            var i = $('#code').find(":selected").text();
            var x = document.getElementById(codeDay);
            if (i=='901549J01')
            {
                document.getElementById(codeDay).style.display= "block";
                x.text = "6h 11h30  14h 20h00";
                x.value ="6h 11h30  14h 20h00";
            }
    else if(i=='901549P13')
            {
                document.getElementById(codeDay).style.display= "block";
                x.text = "7H15 11H31 14h02 19h";
                x.value ="7H15 11H31 14h02 19h";
            }
            else if(i=='901549P17')
            {
                document.getElementById(codeDay).style.display= "block";
                x.text = "9H06 11H24 14H06 15H54";
                x.value ="9H06 11H24 14H06 15H54";
            }
            else if(i=='Repos')
            {
                document.getElementById(codeDay).style.display= "block";
                x.text = "repos";
                x.value ="repos";
            }
            else{
                document.getElementById(codeDay).style.display= "none";
            }

    }

我的代码是这样工作的，当用户从 select 中选择一个选项时，由于 ID，它将影响相应的输入。但问题是它总是第一个被选择的。这是fiddle但它在 jsfiddle 上根本不起作用

为什么第一个选择总是被选中？

Answer 1

这是我的版本

• 类而不是 ID
• 使用数据属性
• 删除 DOM 访问
• 缓存对象
• 使用 switch - 像 { "901549J01": "6h 11h30 14h 20h00"... } 这样的对象会更加优雅

$(function () {
    $(".code").on("change", function () {
        var $sel = $("option:selected", this);
        var val = $sel.val();
        var conceptName = $sel.data('day');
        var $dayField = $("#heure" + conceptName);

        switch (val) {
            case '901549J01':
                $dayField.val("6h 11h30  14h 20h00").show();
                break;
            case '901549P13':
                $dayField.val("7H15 11H31 14h02 19h").show();
                break;
            case '901549P17':
                $dayField.val("9H06 11H24 14H06 15H54").show();
                break;
            case 'repos':
                $dayField.val("repos").show();
                break;
            default:
                $("#heureAutre").show();
        }

    });
});

.hide { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="codeLun" class="code">
    <option value="901549J01" data-day="Lun">901549J01</option>
    <option value="901549P13" data-day="Lun">901549P13</option>
    <option value="901549P17" data-day="Lun">901549P17</option>
    <option value="repos"     data-day="Lun">Repos</option>
    <option value="autre"     data-day="Lun">Autres</option>
</select>
<select name="codeMar" class="code">
    <option value="901549J01" data-day="Mar">901549J01</option>
    <option value="901549P13" data-day="Mar">901549P13</option>
    <option value="901549P17" data-day="Mar">901549P17</option>
    <option value="repos"     data-day="Mar">Repos</option>
    <option value="autreMar"  data-day="Mar">Autres</option>
</select>
<select name="codeMer" class="code">
    <option value="901549J01" data-day="Mer">901549J01</option>
    <option value="901549P13" data-day="Mer">901549P13</option>
    <option value="901549P17" data-day="Mer">901549P17</option>
    <option value="repos"     data-day="Mer">Repos</option>
    <option value="autreMer"  data-day="Mer">Autres</option>
</select>
<input class="text" readonly="readonly" type="text" name="heureLun" id="heureLun" value="" />
<input class="text" readonly="readonly" type="text" name="heureMar" id="heureMar" value="" />
<input class="text" readonly="readonly" type="text" name="heureMer" id="heureMer" value="" />

<input class="hide" type="text" name="heureAutre" id="heureAutre" value="" />

<小时/>

更通用的版本，更少的 html

$(function () {
    var times = ["6h 11h30  14h 20h00", "7H15 11H31 14h02 19h", "9H06 11H24 14H06 15H54", "repos"],hours = {}, vals=[];
    $("#Lun>option").each(function () { // assuming each sel will have the same
      var val = $(this).val();
      if (val != "autre")  vals.push(val);
    });
    $.each(times, function (i, time) {
        hours[vals[i]] = time;
    });
    $(".code").on("change", function () {
        var val = $(this).val();
        var $dayField = $("#heure" + this.id);
        $("#heureAutre").toggle(val == "autre"); // if we have one per day, this code needs fixing
        if (val != "autre") {
            $dayField.val(hours[val]);
        }
    });
});

.hide { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="codeLun" class="code" id="Lun">
    <option value="901549J01">901549J01</option>
    <option value="901549P13">901549P13</option>
    <option value="901549P17">901549P17</option>
    <option value="repos">Repos</option>
    <option value="autre">Autres</option>
</select>
<select name="codeMar" class="code" id="Mar">
    <option value="901549J01">901549J01</option>
    <option value="901549P13">901549P13</option>
    <option value="901549P17">901549P17</option>
    <option value="repos">Repos</option>
    <option value="autre">Autres</option>
</select>
<select name="codeMer" class="code" id="Mer">
    <option value="901549J01">901549J01</option>
    <option value="901549P13">901549P13</option>
    <option value="901549P17">901549P17</option>
    <option value="repos">Repos</option>
    <option value="autre">Autres</option>
</select>
<input class="text" readonly="readonly" type="text" name="heureLun" id="heureLun" value="" />
<input class="text" readonly="readonly" type="text" name="heureMar" id="heureMar" value="" />
<input class="text" readonly="readonly" type="text" name="heureMer" id="heureMer" value="" />

<input class="hide" type="text" name="heureAutre" id="heureAutre" value="" />