更改所选选项功能的输入
Change input on selected option function
我有 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，它会影响相应的输入。但问题是，它始终是第一个被选中的选择。这是一个小提琴，但它在 jsfiddle 上根本不起作用
为什么总是选择第一个选择？
这是我
的版本
- 类而不是 ID
- 数据吸引力的使用
- 删除 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="" />>我更改了您的代码 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="" />按照建议，将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/>我更喜欢这样使用它
.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";
}
}
});
});
工作演示
问题是，因为您在每个选择上都使用相同的 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");
...
看到它工作：小提琴
相关文章：
- 主体单击删除功能上的输入框宽度
- JQuery使用相同的功能自动完成各种输入文本
- jQuery自动完成功能不适用于多个文本输入
- 需要URL模板占位符查找和替换功能的输入
- jQuery:在整个文档上触发按键功能，但不在输入和文本区域内
- GAS - 等到用户输入数据后，功能才会继续
- 组合功能以使用 Jquery 在一组单选按钮中显示输入字段和单选按钮
- 如何在输入下从数据列表中选择一个选项后立即触发功能
- JSTREE - 重命名功能问题(单击重命名后，节点上的文本输入不接受更改）
- 如何将我的 Google 地图功能从自动查找我的位置更改为让我输入一个位置
- 当输入[范围]值更改/拇指拖动时触发功能
- 使用输入框而不是弹出功能
- 用户更改输入值(主干.js）时的触发功能
- 无法触发提前输入功能
- 有没有办法显示/使用用户输入来执行各种功能，例如创建表
- 如何使鼠标输入功能具有淡入淡出效果并保持在那里
- IE 8，功能无法链接到输入按钮
- 触发功能输入 - 茉莉花测试
- 你能有效地重置功能输入顺序吗
- 3功能1输入
