如何用下拉url选项的内容填充文本区域



好吧,好吧,我想这一切都归结为:我如何改进这个代码。。。

<br><br>
<select id="newText">
<option value="url1">tool_ver1</option>
<option value="url2">tool_ver2</option>
<option value="url2" selected >tool_ver3</option>
</select>
<br><br>
<button type="submit">Retrieve New Release App Options</button>
<br><br>

要填充以下文本区域。。。

<div class="textInput spacer">
<h2>New Release App Options</h2>
<textarea id="newText"></textarea>
</div>

最后,文本区域需要填充为newText选择的任何url的内容。我无法使用提交按钮来做我希望/期望的事情。

使用jQuery,选择元素并使用val方法。在纯js中,查询元素并使用value成员。

//jQuery
$(document).ready(function(){
$("textarea#mytextarea").val("My value");
});
//OR pure js
document.getElementById('mytextarea').value = 'My value';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id='mytextarea'></textarea>

这是一个简单的答案,使用纯js而不使用jquery。如果你愿意,你可以修改它来处理"提交",但我让它处理"更改"。

const select = document.getElementById('select')
const newText = document.getElementById('newText')
select.addEventListener("change", e => {
console.log(e.target.value)
newText.value = e.target.value
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<select id="select">
<option value="url1">tool_ver1</option>
<option value="url2">tool_ver2</option>
<option value="url3" selected >tool_ver3</option>
</select>
<button type="submit">Retrieve New Release App Options</button>
<div class="textInput spacer">
<h2>New Release App Options</h2>
<textarea id="newText"></textarea>
</div>


</body>
</html>

我想你挂断电话是因为你的<选择>菜单和您的<text区域>具有相同的ID。这是一个正在工作的JSFiddle,它更新<text区域>每次更改<选择>菜单如果你愿意的话,你可以很容易地根据按钮的点击来重新调整它以进行更新。

https://jsfiddle.net/bytebodger/zct0po47/

$(document).ready(function(){
const currentValue = $('#newText').val();
$('#selectedOption').empty().append(currentValue);
$('#newText').on('change', function(event) {
const currentValue = $('#newText').val();
$('#selectedOption').empty().append(currentValue);
});
});

最后,这对我来说很有效。感谢所有帮助我的人——非常感谢!

<body>
<h1 class="top"> Check application option default settings between two releases</h1>
<div class="top"><br>
<button type="submit">Select Release #1</button>
<select id="selectedBaseRelease">
<option value="https://wwwin/~ckennedy/releases/K-2015.06.AppOp.Defaults.txt" selected >ICC2_K-2015.06</option>
<option value="https://wwwin/~ckennedy/releases/L-2016.03.AppOp.Defaults.txt">ICC2_L-2016.03</option>
<option value="https://wwwin/~ckennedy/releases/M-2016.12.AppOp.Defaults.txt">ICC2_M-2016.12</option>
<option value="https://wwwin/~ckennedy/releases/N-2017.09.AppOp.Defaults.txt">ICC2_N-2017.09</option>
<option value="https://wwwin/~ckennedy/releases/O-2018.06.AppOp.Defaults.txt">ICC2_O-2018.06</option>
</select>
<br><br>
<button type="submit">Select Release #2</button>
<select id="selectedNewRelease">
<option value="https://wwwin/~ckennedy/releases/K-2015.06.AppOp.Defaults.txt">ICC2_K-2015.06</option>
<option value="https://wwwin/~ckennedy/releases/L-2016.03.AppOp.Defaults.txt" selected >ICC2_L-2016.03</option>
<option value="https://wwwin/~ckennedy/releases/M-2016.12.AppOp.Defaults.txt">ICC2_M-2016.12</option>
<option value="https://wwwin/~ckennedy/releases/N-2017.09.AppOp.Defaults.txt">ICC2_N-2017.09</option>
<option value="https://wwwin/~ckennedy/releases/O-2018.06.AppOp.Defaults.txt">ICC2_O-2018.06</option>
</select>
<br><br>
</div>
<div class="top">
<strong>Context size (optional):</strong> <input type="text" id="contextSize" value="" />
</div>
<div class="textInput spacer">
<h2>Release #1 App Option Defaults</h2>
<textarea class="textbox" id="baseText"></textarea>
<script>
$(document).ready(function(){
const currentBaseValue = $('#selectedBaseRelease').val();
$('#baseText').empty().append(currentBaseValue);
$('#selectedBaseRelease').on('change', function(event) {
const currentBaseValue = $('#selectedBaseRelease').val();
$('#baseText').empty().load(currentBaseValue)
});
});
</script>
</div>
<div class="textInput spacer">
<h2>Release #2 App Option Defaults</h2>
<textarea class="textbox" id="newText"></textarea>
<script>
$(document).ready(function(){
const currentNewValue = $('#selectedNewRelease').val();
$('#newText').empty().append(currentNewValue);
$('#selectedNewRelease').on('change', function(event) {
const currentNewValue = $('#selectedNewRelease').val();
$('#newText').empty().load(currentNewValue)
});
});
</script>
</div>
<div class="viewType">
<input type="radio" name="_viewtype" id="sidebyside" onclick="diffUsingJS(0);" /> <label for="sidebyside">Side by Side Diff</label>
&nbsp; &nbsp;
<input type="radio" name="_viewtype" id="inline" onclick="diffUsingJS(1);" /> <label for="inline">Inline Diff</label>
</div>
<div id="diffoutput"> </div>
</body>

最新更新