Question

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

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

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

Answer 1

你不需要php。你可以使用javascript（Jquery）来完成它。这是一个例子：

＆＃13;

$(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"));
    });
});

＆＃13;

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

＆＃13;

Answer 2

这就是您所要求的，尽管在snippet中查看并不令人印象深刻，但是，在更改后检查输入字段会显示已填充name属性。

＆＃13;

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

＆＃13;

Answer 3

您可以使用jquery。绑定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库

从HTML选择对象更新HTML属性

3 个答案: