从 HTML 选择对象更新 HTML 属性答案

【问题标题】：update HTML property from HTML select object从 HTML 选择对象更新 HTML 属性
【发布时间】：2018-01-11 17:20:26
【问题描述】：

有没有一种简单的方法可以从 HTML 选择对象更新 html 属性？在下面的示例中，当用户选择一个选项时，我想用来自select 对象的值更新name。

编辑：用户可以添加更多搜索条件，如下所示；我有一个功能可以将类似下面的代码添加到搜索表单中。

<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
<select>
    <?php
        foreach ($fields as $key => $value) {
            if ($key=="select") {
                echo "<option selected value='".$key."'>".$value."</option>";
            } else {
                echo "<option value='".$key."'>".$value."</option>";
            }
        }
    ?>
</select>

【问题讨论】：

带有 jquery 的 Ajax 是一个使用选项调用 php 页面的选项
@L.Ros。这不是 OP 所要求的
您需要为此进行客户端编程。
假设您的标签对 jQuery 解决方案感到满意，您可以挂钩到 select 的 change 事件，然后获取它的 val() 并将其设置为input.
@Rory McCrossan 好的。

标签： javascript php jquery html

【解决方案1】：

这符合您的要求，尽管在 snippet 中看起来并不令人印象深刻，但是，在更改后检查输入字段表明 name 属性已被填充。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
  <select onChange="doThing(this)">
    <option value="KeyOne">ValOne</option>
    <option value="Key2">Val2</option>
    <option value="Key3">Val3</option>
    <option value="Key4">Val4</option>
    <option value="Key5">Val5</option>
  </select>
  
  
  <script type="text/javascript">
    function doThing(f){
      $("#AS1").attr("name",$(f).val());
    }
  </script>

【讨论】：

看起来很完美！谢谢，我现在试试
第一个效果很好，它回答了这个问题，但我试图让你的答案适应动态添加的答案，但到目前为止没有任何运气；找不到this。我尝试用e.target 和动态生成的id 替换select 对象，但doThing 没有更新name。有什么想法吗？
@jotyhista 我可能不得不看看它。 this 当然是指select 元素。你可以给它一个id，然后改变函数。动态生成的选项值不应更改任何内容，因为它们在 javascript 运行之前呈现。
我在这里发布了一个新问题，以防您有空：stackoverflow.com/questions/48214933/…

【解决方案2】：

您可以使用 jquery。为 select 绑定 on change 事件并将选择值设置到所需位置。以你为例

<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
  <select class="sel">
      <?php
        foreach ($fields as $key => $value) {
          if($key=="select"){
            echo "<option selected value='".$key."'>".$value."</option>";
          }else{
            echo "<option value='".$key."'>".$value."</option>";
          }
        };
      ?>
  </select>
$(document).ready(function(){
$('.sel').change(function(){
var value = $(this).val();
$('#AS1').val(value);
});
})

不要忘记添加 jquery 库

【讨论】：

【解决方案3】：

您不需要 php。您可以使用 javascript (Jquery) 来完成。这是一个例子：

$(document).ready(function() {

    $("#select_name option").filter(function() {
        return $(this).val() == $("#animal_name").val();
    }).attr('selected', true);
    $("#select_name").on("change", function() {     
  $("#animal_name").attr("name",$(this).find("option:selected").attr("value"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_name" name="select_name"> 
<option value="">Please select an animal</option> 
<option value="Cat">Cat</option> 
<option value="Dog">Dog</option> 
<option value="Cow">Cow</option> 
</select>

<input type="text" id="animal_name" name="animal_name" value="" readonly="readonly">

【讨论】：

问题要求更新输入字段中的属性name，而不是值。 [我认为]