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

您可以使用以下内容：

示例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>

Example2这将添加具有值的新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 2

您可以使用String.replace

    c1  c4  cols.c2 cols.c3
0   10  41  20      str1
1   11  42  20      str2
2   12  43  20      str3

pd.DataFrame

Answer 3

更改name元素后，您需要遍历每个option元素，并用[NAME HERE]的值替换文本的name部分元素。

注释（仅供参考）：

最好不要给任何元素name或id 的"name"，因为name是window对象的Global属性并将其与HTML元素一起使用可能会导致某些问题边缘案例。
由于您已将元素id指定给您，因此只需将其用作您的 jQuery选择器--输入更少，效果更好。
您没有正确使用label元素。这本来是一个表单字段的标题，您可以通过以下方式将其“连接”到字段向其中添加一个值为for的{{1}}属性表单字段是它的标签，或者您可以嵌套它的表单字段 id元素本身内的标签。您确实有label 属性是在第二个属性上设置的，但是您没有 for设置正确。标签对用户非常重要可访问性，因此您在使用它们时要格外小心。
JQuery团队不赞成使用快捷方式事件方法（for，click()等）。他们现在推荐使用on()方法进行事件绑定（如下所示）。
由于默认的视觉样式，因此不使用HTML元素跟他们一起来。使用正确的HTML元素来传达内容的含义。例如，您在以下大多数情况下使用了change() 可能是因为它会产生斜体文本。但是，真正的原因是使用该元素是为了传达应解释的内容以“其他声音或心情”陈述-好像是有人说。对于所有视觉样式，请使用CSS。

<em>

$('#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; }

Answer 4

您可以改为在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 5

稍微复杂些，但是此解决方案允许实时更新选择框。这可以通过以下方式进行：

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

// 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>

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

5 个答案: