更改所选选项功能的输入

时间：2015-11-19 10:12:13

标签： javascript jquery html

我有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

上根本不起作用

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

5 个答案:

答案 0 :(得分：1)

这是我的版本

  • 类而不是ID
  • 使用data-attr
  • 删除DOM访问
  • 对象缓存
  • 使用开关 - 像{ "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="" />

答案 1 :(得分：0)

我更改了您的代码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="" />

答案 2 :(得分：0)

建议将id更改为class并将change个事件附加到所有.code，然后您可以从onchange删除内联html下面：

＆＃13;
＆＃13; 
//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()
  }
});
＆＃13; 
.text{
  display:none;  
}
＆＃13; 
<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/>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我更喜欢像这样使用它

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

答案 4 :(得分：0)

问题是，因为你在每个选择上使用相同的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

相关问题
最新问题