使用 Jquery 从文本输入更改 [NAME HERE]

Question

我有一个简单的表单，并希望第一个文本框中的名称输入替换选择框中的文本 [NAME HERE]，该文本已输出到第三个框。

$('select[name=phrase]').change(function() {
$('textarea[name=line]').val($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
<div class="well">
<div class="form-group">
<label>Client's Name or Animal </label>
<input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
<select class="form-control" id="phrase" name="phrase">
<option>Please Select</option>
<option>Custom Phrase [NAME HERE] 1</option>
<option>Custom Phrase [NAME HERE] 2</option>
<option>Custom Phrase [NAME HERE] 3</option>
<option>Custom Phrase [NAME HERE] 4</option>
<option>Custom Phrase [NAME HERE] 5</option>
</select>
</div>
<div class="form-group">
<label>Custom Word(s), Sentence or Paragraph</label>
<textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
<span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
</div>

Answer 1

您可以在name输入框中查找更改，然后在发生更改时获取名称，并将所有选项替换为使用.replace和.text给出的名称：

$('#name').change(function() {
const name = $(this).val();
$('select[name=phrase] > option').each(function() {
$(this).text((_, txt) => txt.replace('[NAME HERE]', name));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
<div class="well">
<div class="form-group">
<label>Client's Name or Animal </label>
<input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
<select class="form-control" id="phrase" name="phrase">
<option>Please Select</option>
<option>Custom Phrase [NAME HERE] 1</option>
<option>Custom Phrase [NAME HERE] 2</option>
<option>Custom Phrase [NAME HERE] 3</option>
<option>Custom Phrase [NAME HERE] 4</option>
<option>Custom Phrase [NAME HERE] 5</option>
</select>
</div>
<div class="form-group">
<label>Custom Word(s), Sentence or Paragraph</label>
<textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
<span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
</div>

Answer 2

你可以使用这样的东西：

示例 1：这将更改包含[NAME HERE]的第一个选项

$("#name").change(function() {
var opt = $("#phrase option:contains(\[NAME HERE\])").first()
if (opt) {
$(opt).text($(opt).text().replace("[NAME HERE]", $(this).val()))
}
$(this).val("")
});

工作示例

$('select[name=phrase]').change(function() {
$('textarea[name=line]').val($(this).val());
});
$("#name").change(function() {
var opt = $("#phrase option:contains(\[NAME HERE\])").first()
if (opt) {
$(opt).text($(opt).text().replace("[NAME HERE]", $(this).val()))
}
$(this).val("")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
<div class="well">
<div class="form-group">
<label>Client's Name or Animal </label>
<input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
<select class="form-control" id="phrase" name="phrase">
<option>Please Select</option>
<option>Custom Phrase [NAME HERE] 1</option>
<option>Custom Phrase [NAME HERE] 2</option>
<option>Custom Phrase [NAME HERE] 3</option>
<option>Custom Phrase [NAME HERE] 4</option>
<option>Custom Phrase [NAME HERE] 5</option>
</select>
</div>
<div class="form-group">
<label>Custom Word(s), Sentence or Paragraph</label>
<textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
<span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
</div>

示例 2 这将添加一个具有值的新option

$("#name").change(function() {
$("#phrase").append("<option>Custom Phrase " + $(this).val() + " 1</option>");
$(this).val("")
});

工作示例

$('select[name=phrase]').change(function() {
$('textarea[name=line]').val($(this).val());
});
$("#name").change(function() {
$("#phrase").append("<option>Custom Phrase " + $(this).val() + " 1</option>");
$(this).val("")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
<div class="well">
<div class="form-group">
<label>Client's Name or Animal </label>
<input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
<select class="form-control" id="phrase" name="phrase">
<option>Please Select</option>
</select>
</div>
<div class="form-group">
<label>Custom Word(s), Sentence or Paragraph</label>
<textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
<span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
</div>

Answer 3

您可以使用 String.replace

lastVal = '[NAME HERE]';
$('#input').on('change', function() {
var newText = this.value;
$('#select > option').each(function() {
var getText = $(this).text();
$(this).text(getText.replace(lastVal, newText));
})

lastVal = newText;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input">
<select id="select">
<option>Custom Phrase [NAME HERE] 1</option>
<option>Custom Phrase [NAME HERE] 2</option>
<option>Custom Phrase [NAME HERE] 3</option>
<option>Custom Phrase [NAME HERE] 4</option>
<option>Custom Phrase [NAME HERE] 5</option>
</select>

Answer 4

当name元素发生更改时，您需要遍历每个option元素，并将文本的[NAME HERE]部分替换为name元素的值。

注(仅供参考)：

• 最好不要给任何元素一个name或一个id"name"，因为name是window对象的全局属性 将其与您的HTML元素一起使用可能会导致某些问题 边缘情况。
• 既然你已经给你的元素ids，就用它们作为你的 JQuery selctors - - 它打字更少，性能更好。
• 您没有正确使用label元素。它注定是一个 表单字段的标题，您可以通过以下方式将其"连接"到字段 向其添加一个for属性，该属性的值为id表单域 它是它的标签，或者您可以嵌套它的表单域label元素本身内的标签。你确实有for在第二个属性上设置了属性，但您没有for设置正确。标签对用户非常重要 可访问性，因此您需要小心使用它们。
• JQuery 团队弃用了快捷事件方法的使用 (click()、change()等)很久以前。他们现在推荐 使用on()方法进行事件绑定(如下所示)。
• 不要使用 HTML 元素，因为默认的视觉样式 与他们一起来。使用正确的 HTML 元素来传达 内容的含义。例如，您在以下使用了<em>可能是因为它生成斜体文本。但是，真正的原因 使用该元素是为了传达内容应该被解释 以"替代声音或情绪"陈述 - 好像是 有人说。对于所有视觉样式，请使用 CSS。

$('#userName').on("change", function() {
// Loop over the option elements
$("#phrase > option").each(function(index, element){
// Set the text of the option to an adjusted string
$(element).text($(element).text().replace("[NAME HERE]", $("#userName").val()));
});
});
$('#phrase').on("change", function() {
$('#line').val($(this).val());
});

.emphasized { color:red; font-style:italic; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
<div class="well">
<div class="form-group">
<label for="userName">Client's Name or Animal </label>
<input type="text" class="form-control" name="userName" id="userName" placeholder="Example: John Doe">
</div>
<div class="form-group">
<label for="phrase">Select Phrase or Enter Custom Text Below</label>
<select class="form-control" id="phrase" name="phrase">
<option>Please Select</option>
<option>Custom Phrase [NAME HERE] 1</option>
<option>Custom Phrase [NAME HERE] 2</option>
<option>Custom Phrase [NAME HERE] 3</option>
<option>Custom Phrase [NAME HERE] 4</option>
<option>Custom Phrase [NAME HERE] 5</option>
</select>
</div>
<div class="form-group">
<label for="line">Custom Word(s), Sentence or Paragraph</label>
<textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
<span class="help-block emphasized">500 Words MAX</span>
</div>

Answer 5

稍微复杂一些，但此解决方案允许实时更新选择框。这按以下方式工作：

1. 将选项的初始值保存到变量中。
2. 在"keyup"(或您想要的任何内容)上执行以下操作：
   1. 克隆模板选项并替换占位符。
   2. 删除旧选项。
   3. 插入新选项。
   4. 更新选择框以选中具有相同索引的选项。
3. 触发事件一次以从视图中删除占位符。

// move content from select into textarea
$('select[name="phrase"]').change(function() {
$('textarea[name="line"]').val($(this).val());
});
// realtime update select based upon name
(function () {
var $input = $('#name'),
$select = $('#phrase'),
$optionTemplates = $select.find('option');

$input.keyup(function () {
var $oldOptions = $select.find('option'),
$newOptions = $optionTemplates.clone().each(function () {
this.text = this.text.replace('[NAME HERE]', $input.val());
}),
newValue = $newOptions[$select.prop('selectedIndex')].text;

$oldOptions.remove();
$newOptions.appendTo($select);
$select.val(newValue);
}).trigger('keyup');
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
<div class="well">
<div class="form-group">
<label>Client's Name or Animal </label>
<input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
<select class="form-control" id="phrase" name="phrase">
<option>Please Select</option>
<option>Custom Phrase [NAME HERE] 1</option>
<option>Custom Phrase [NAME HERE] 2</option>
<option>Custom Phrase [NAME HERE] 3</option>
<option>Custom Phrase [NAME HERE] 4</option>
<option>Custom Phrase [NAME HERE] 5</option>
</select>
</div>
<div class="form-group">
<label>Custom Word(s), Sentence or Paragraph</label>
<textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
<span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
</div>