iT邦幫忙

0

jQuery 下拉無法更新資料

我的程式目錄有3個
A
B
C
裡面各有3個檔案
1.txt
2.txt
3.txt
在A目錄的1.txt內容是A1,2.txt內容是A2,3.txt內容是A3
以此類推
主要要做的功能是當【種類】下拉改變時,【流水】下拉跟著改變,【指令檔】會根據【種類】下拉的值打開相對應的目錄,並讀取該目錄的檔案
問題如下:
程式一進入時
第一次看到的【指令擋】下拉是正確的
點下去也能看到相對應的目錄檔案
如圖所示
https://ithelp.ithome.com.tw/upload/images/20210529/20062486glsJiVQyty.png
但是接下來把【種類】下拉改變
雖然【流水】的下拉也跟著改變
但是【指令檔】的下拉卻改變不了
https://ithelp.ithome.com.tw/upload/images/20210529/20062486ufpvoN3a3E.png
程式碼如下:

var aa=['','A','B','C'];
for(var i=0;i<aa.length;i++)
{
	$("#eqps_kind").append('<option>'+aa[i]+'</option>');
}
$("#eqps_kind").change(function(){
	$("#eqps").empty();
	$("#cmds").empty();
	var txt=$("#eqps_kind :selected").text();
	//alert(txt);//這裡執行正常
	$.get(txt+'.txt',function(data){
		var eqps = data.split("\n");
		for(var i=0;i<eqps.length;i++)
		{
			$("#eqps").append('<option>'+eqps[i]+'</option>');
		}
	});
	$.ajax({
		type: "POST",
		url: "read_ajax.php",
		dataType: "text",
		data: {
			contents: txt,
		},
		success: function(data) {
			//alert(txt+"\n"+$("#text1").val());
			//$("#text3").val(data);
			var cmds = data.split("\n");
			for(var i=0;i<cmds.length;i++)
			{
				$("#cmds").append('<option>'+cmds[i]+'</option>');
			}
			$('#cmds').editableSelect();
			$('#cmds').on('select.cmds', function (e) {
				var txt = $("#cmds").val();
				$("#text1").load(txt);
				$("#text2").val('');
				$.get(txt,function(data){
					var textByLine = data.split("\n");
					$('#paras').val(textByLine[0]);//返回第一行資料
					$('#paras').keyup(function() {
						var content = data;
						var paras = $('#paras').val().split(',');
						var key = textByLine[0].split(',');
						for(var i=0;i<key.length;i++)
						{
							var re = new RegExp('%'+key[i].trim()+'%','g');
							content = content.replace(re,paras[i].trim());
						};
						$("#text2").val(content);
					});
				});
			});
		},
		error: function(jqXHR) {
			alert("發生錯誤: " + jqXHR.status);
		}
	})
});

我如果把
$('#cmds').editableSelect(); 註解
下拉功能就會正常
但是因為我想要【指令檔】的下拉也能編輯
所以加入那行
不知道因為加了那行後出了什麼問題
再請大家幫忙
謝謝

看更多先前的討論...收起先前的討論...
andyto202 iT邦研究生 4 級 ‧ 2021-05-29 14:01:37 檢舉
完整的html如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<title></title>
<script src="jquery-3.5.0.js"></script>
<script src="jquery-editable-select.min.js"></script>
<link href="jquery-editable-select.min.css" rel="stylesheet">
<body>
<label>種類</label>
<select id="eqps_kind"></select>
<label>流水</label>
<select id="eqps"></select>
<label>指令檔</label>
<select id="cmds"></select>
<p>
<div id="div1">
<form id="form1" name="form1" method="post" action="send.php" target="_blank" enctype="multipart/form-data">
<TextArea Cols="90" Rows="20" id="text1" name="text1" style="background-color:#FEFF91; border:5px solid; border-color:#73FF75"></TextArea>
</form>
</div>
<script>
var aa=['','A','B','C'];
for(var i=0;i<aa.length;i++)
{
$("#eqps_kind").append('<option>'+aa[i]+'</option>');
}
$("#eqps_kind").change(function(){
$("#eqps").empty();
$("#cmds").empty();
var txt=$("#eqps_kind :selected").text();
//alert(txt);//這裡執行正常
$.get(txt+'.txt',function(data){
var eqps = data.split("\n");
for(var i=0;i<eqps.length;i++)
{
$("#eqps").append('<option>'+eqps[i]+'</option>');
}
});
$.ajax({
type: "POST",
url: "read_ajax.php",
dataType: "text",
data: {
contents: txt,
},
success: function(data) {
//alert(txt+"\n"+$("#text1").val());
//$("#text3").val(data);
var cmds = data.split("\n");
for(var i=0;i<cmds.length;i++)
{
$("#cmds").append('<option>'+cmds[i]+'</option>');
}
//$('#cmds').editableSelect();
$('#cmds').on('select.cmds', function (e) {
var txt = $("#cmds").val();
$("#text1").load(txt);
$("#text2").val('');
$.get(txt,function(data){
var textByLine = data.split("\n");
$('#paras').val(textByLine[0]);//返回第一行資料
$('#paras').keyup(function() {
var content = data;
var paras = $('#paras').val().split(',');
var key = textByLine[0].split(',');
for(var i=0;i<key.length;i++)
{
var re = new RegExp('%'+key[i].trim()+'%','g');
content = content.replace(re,paras[i].trim());
};
$("#text2").val(content);
});
});
});
},
error: function(jqXHR) {
alert("發生錯誤: " + jqXHR.status);
}
})
});

</script>
</body>
</html>
YoChen iT邦研究生 4 級 ‧ 2021-05-29 19:28:52 檢舉
除錯的時候打開開發者工具(F12)可以幫您省去很多麻煩
以防萬一還是問一下,您應該有引用jquery-editable-select吧~XDDD
andyto202 iT邦研究生 4 級 ‧ 2021-05-30 10:46:51 檢舉
有啊,這行
<script src="jquery-editable-select.min.js"></script>
YoChen iT邦研究生 4 級 ‧ 2021-05-30 12:34:35 檢舉
那您可以先看打開Browser開發者工具(F12)看一下有沒有錯誤訊息
andyto202 iT邦研究生 4 級 ‧ 2021-05-30 15:00:48 檢舉
沒有錯誤訊息
只是【種類】第2次下拉時
不會去執行
jquery-editable-select.min.css

尚未有邦友回答

立即登入回答