更改所选选项功能的输入答案

【问题标题】：Change input on selected option function更改所选选项功能的输入
【发布时间】：2015-11-19 10:12:13
【问题描述】：

我有 3 个select，当用户选择一个选项时，关联值会显示在输入中。我只想对这 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 上根本不起作用

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

【问题讨论】：

第一眼 .. Id 必须是唯一的 .. 将 id="code" 更改为 class="code" 并在 js 中使用 .而不是 # $('.code')
@Mohamed-Yousef 是的，我将 Id 更改为 class，但我认为问题不在于此
@SimonM。是的，课后你必须通过这个，看看我的答案

标签： javascript jquery html

【解决方案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="" />

【讨论】：

【解决方案2】：

我更改了你的代码http://jsfiddle.net/ykvr61rL/3/

移除 id 并使用类

现在为什么我要在函数中传递它，因为现在我们有相同的类名所以这只会给你当前选择的范围

function ModifChamp(scope) {
  var conceptName = $(scope).find(":selected").attr('class');
  console.log(conceptName)
  var codeDay = "heure" + conceptName;
  console.log(codeDay)
  var i = $(scope).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";
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="codeLun" class="code" onChange="ModifChamp(this)">
  <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" class="code" onChange="ModifChamp(this)">
  <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" class="code" onChange="ModifChamp(this)">
  <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="" />

使用 JQUERY 进行编辑

$('.code').change(function() {
    var conceptName = $(this).find(":selected").attr('class');
    var codeDay = "heure" + conceptName;
    var i = $(this).find(":selected").text();
    var x = $('#' + codeDay);
    console.log(x)
    if (i == '901549J01') {
        x.show()
        x.val("6h 11h30  14h 20h00");
    } else if (i == '901549P13') {
        x.show()
        x.val("7H15 11H31 14h02 19h");
    } else if (i == '901549P17') {
        x.show();
        x.val("9H06 11H24 14H06 15H54");
    } else if (i == 'Repos') {
        x.show();
        x.val("repos");
    } else {
        x.hide()

    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="codeLun" class="code" >
  <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" class="code" >
  <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" class="code" >
  <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="" />

【讨论】：

不完全是。仍然存在不一致之处。例如输入字段没有.text，只需要获取一次codeDay，也可以用jQuery获取
@SimonM。我也使用 jquery 更新了答案并添加了解决方案
现在又做了一个改动，它看起来像我的版本，除了我的开关
lol jquery 函数是一样的，所以你告诉我我可以改变什么

【解决方案3】：

按照建议将id 更改为class 并将change 事件附加到所有.code，您可以从html 中删除内联onchange，如下所示：

//change Event for all the select
$('.code').on('change',function(){
  //get respective elements and data using $(this) which refers to current select
  var conceptName = $(this).find("option:selected").attr('class');
  var codeDay = "heure"+conceptName;
  var i = $(this).find("option:selected").text();
  var x = $("#"+codeDay);
  if (i=='901549J01')
  {
    $(x).show().text("6h 11h30  14h 20h00").val("6h 11h30  14h 20h00");
    //keep it in a single line
  }
  else if(i=='901549P13')
  {
    $(x).show().text("7H15 11H31 14h02 19h").val("7H15 11H31 14h02 19h")
  }
  else if(i=='901549P17')
  {
    $(x).show().text("9H06 11H24 14H06 15H54").val("9H06 11H24 14H06 15H54")
  }
  else if(i=='Repos')
  {
    $(x).show().text("repos").val("repos")
  }
  else{
    $(x).hide()
  }
});

.text{
  display:none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="codeLun" class="code">
  <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" class="code">
  <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" class="code">
  <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>
<br/>
<input class="text" readonly="readonly" type="text" name="heureLun" id="heureLun" value=""/><br/>
<input class="text" readonly="readonly" type="text" name="heureMar" id="heureMar" value=""/><br/>
<input class="text" readonly="readonly" type="text" name="heureMer" id="heureMer" value=""/><br/>

【讨论】：

【解决方案4】：

我更喜欢这样使用它

html

<select name="codeLun" class="code" >

js

$(document).ready(function(){
    $('.code').on('change',function(){
            {
                var conceptName = $(this).find("option:selected").attr('class');
                var codeDay = "heure"+conceptName;
                var i = $(this).find("option: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";
                }

        }

     });
 });

Working Demo

【讨论】：

【解决方案5】：

问题是，因为您在每次选择时都使用相同的 id，所以将其用作选择器总是会返回第一个。

您的代码中的快速更改将是：

1.- 在每次调用您的函数时使用 this

<select name="codeLun" id="code" onChange="ModifChamp(this)">
...
<select name="codeLun" id="code" onChange="ModifChamp(this)">
...
<select name="codeLun" id="code" onChange="ModifChamp(this)">
...

2.- 更改您的函数以读取元素并根据它做出决定

function ModifChamp(element){
    var conceptName = $(element).find("option:selected").attr("class");
...

看看它是否正常工作：FIDDLE

【讨论】：