jQuery 下拉無法更新資料

jquery

andyto202 2021-05-29 14:00:28 ‧ 989 瀏覽

分享至

我的程式目錄有3個
A
B
C
裡面各有3個檔案
1.txt
2.txt
3.txt
在A目錄的1.txt內容是A1，2.txt內容是A2，3.txt內容是A3
以此類推
主要要做的功能是當【種類】下拉改變時，【流水】下拉跟著改變，【指令檔】會根據【種類】下拉的值打開相對應的目錄，並讀取該目錄的檔案
問題如下:
程式一進入時
第一次看到的【指令擋】下拉是正確的
點下去也能看到相對應的目錄檔案
如圖所示

但是接下來把【種類】下拉改變
雖然【流水】的下拉也跟著改變
但是【指令檔】的下拉卻改變不了

程式碼如下:

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>

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

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

修改