How to dynamically change queries at onchange timing on ui page

[Yota_Oki]

I don't know how to dynamically change the query at the onchange timing on the ui page.

Specifically, after the value of "before_approver" on line 41 changes, I would like to query "after_approver" so that only the people selected in "before_approver" are filtered.

This query is meaningless; it is simply simplified for testing purposes.

Onchange = "filter(this.value)" on line 41, this function is working and the variable "ref" also contains the correct value, but the value inside the <script> tag is changed to "after_approver". " and query = "${ref}" doesn't work well either.

Is it possible to use the <script> tag value in html?

The <g:evaluate> tag is said to be executed only once when the html is loaded. Is this understanding correct?

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	<g:evaluate>
		<!--再割り当て前のユーザーの絞り込み-->
    	var sys_id = "${RP.getWindowProperties().get('sys_id')}";	<!--ボタンを押したレコードのsys_id-->
		var refQual = "";

		gr = new GlideRecord('sysapproval_approver');
		gr.addQuery('sysapproval', sys_id);
		gr.addQuery('state', 'requested');
		gr.query();
		
		while (gr.next()) {
			refQual += "sys_id = " + gr.approver + "^OR";
		}

		<!--再割り当て後のユーザーの絞り込み-->
	</g:evaluate>

    <g:ui_form>
	<table>

		<tr>
			<td style="width:50%"> 
				 <input type="hidden" id="record_sys_id" name="record_sys_id" value=""/>
				 <input type="hidden" id="table_name" name="table_name" value=""/>
				 <input type="hidden" id="refQual2" name="refQual2" value=""/>
        	</td>
		</tr>
		
		<tr>
			<td style="width:25%">
				<g:form_label>
				現在割り当てられている承認者
		        </g:form_label>		
            </td>
		</tr>
		<tr>
		  	<td style="width:60%">
		    	<g:ui_reference name="before_approver" id="before_approver" table="sys_user" query = "${refQual}" value = "" onchange="filter(this.value)"/>
            </td>
		</tr>


		<tr>
			<td style="width:25%">
				<g:form_label>
				再割り当てしたい承認者
		        </g:form_label>		
            </td>
		</tr>
		<tr>
		  	<td style="width:60%">
				${ref}
		    	<g:ui_reference name="after_approver" id="after_approver" table="sys_user" query = "${ref}" value = ""/>
            </td>
		</tr>

		<tr>
			<td style="width:25%">
				<g:form_label>
				再割り当てする理由を入力してください（必須）
				</g:form_label>
        	</td>
		</tr>
		<tr>
			<td style="width:50%"> 
            	 <textarea class = "reason" id="reason" name="reason" cols="20" rows="5" maxlength="100"></textarea>
        	</td>
		</tr>
		
		<tr>
			<td>
				<button class="btn btn-default" onclick="continueCancel()" style="margin-right:10px;">キャンセル</button>
				<button class="btn btn-primary"  onclick="continueOK()" id = "submit" disabled = "">再割り当て</button>
			</td>
        </tr>
	</table>
	</g:ui_form>

	<script>
		var reason = document.getElementById("reason");
    	var button = document.getElementById("submit");
		var text = reason.value;

    	reason.addEventListener('keyup', function() { // 入力テキストのキーアップイベント

        	text = reason.value;

        	if (text) {
            	button.disabled = false;
        	} else {
            	button.disabled = true;
        	}
    	})
	</script>

	<script>
	function filter(before_approver){
		var ref = "";
		var gr = new GlideRecord('sys_user');
		gr.addQuery('sys_id', before_approver);
		gr.query();

		if(gr.next()){
			//alert(gr.sys_id);
		}
		ref += "sys_id=" + before_approver + "^OR";
		alert(ref);
	}
	</script>