如何根据动态输入的 id 更新元素的占位符属性？答案

【问题标题】：How to update an element's placeholder attribute based on a dynamically fed id?如何根据动态输入的 id 更新元素的占位符属性？
【发布时间】：2013-12-31 02:16:53
【问题描述】：

我对 jQuery 很陌生，我几乎完全可以肯定我在这里做错了很多事情。

我正在为电子竞技团队创建一个小型搜索页面作为一个项目。您从主页选择您的团队，然后使用 POST 将其馈送到结果页面。我有一个名为 $team_id 的变量，它存储一个与可以从该页面外部更新/更改的数组相关的数字 ID，因此在添加更多数字后，不能保证数字相同。

我需要将占位符替换为与主页 ID 匹配的文本。

这是我当前的 html：

<select name="exampleID" id="exampleID" data-placeholder="Team Name Will Be Updated Here">
      <optgroup label="Conference One">
          <option value="56" conf_id="1" team_id="1">Team Green</option>
          <option value="57" conf_id="1" team_id="2">Team</option>

在上面的示例中，如果我从主页单击 Team Green，则 team_id="1" 将通过 POST 传递。

这是我当前的 javascript：

<script text="application/javascript">
    $(function() {
        var selectedTeam = "<?php print $team_id ?>"
        var teamNames = [];
        $('#exampleID option').each(function() {
            teamNames.push({ "id" : this.value, "text" : this.textContent });
        });

        console.log(serviceNames);
    });

在我的示例中，这会正确地将团队名称放入一个数组中，并将它们与一个 ID 匹配。这也正确地将我的 team_id 存储到 selectedTeam 变量中。

现在我的问题是，如何根据我的 serviceNames var 将占位符更新为选定的文本（因此它会更改为绿色团队）？

我尝试做这样的事情，但我不知道我是否走在正确的轨道上：

if(this.value == selectedTeam) {
    $("#exampleID option[team_id='selectedTeam']").text();
    $('select#exampleID').attr('data-placeholder,selectedTeam');
});

提前感谢您的帮助！

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

当前在您的 js 中是 attr('data-placeholder,selectedTeam')，它会寻找具有 data-placeholder,selectedTeam 而不是 data-placeholder 的 attr。分离属性及其值

更新的 JS

var item = $("#exampleID option[value='" + selectedTeam + "']"); // assign it
var selectedText = item.text(); // get the text
item.prop('selected', true); // make the option selected
$('#exampleID').attr('data-placeholder', selectedText); // update the placeholder value

查看http://jsfiddle.net/raunakkathuria/44EWr/5/

【讨论】：

我尝试将它包含在我的脚本中，但我只收到弹出式 JavaScript 警报。我不认为我把它放在正确......我将如何将它添加到其余部分？但它完全符合我的要求！谢谢，我正在尝试自己实现它
你从 fiddle 复制了 javascript 吗？我发出警报以显示它正在保存
例如，当我将代码更改为抓取 team_id="2" 时（因此它只会显示 Team），它并没有在小提琴中更新，它仍然显示 Team Green。抱歉这么密集。

【解决方案2】：

使用所选选项的文本值从下拉列表中更新占位符数据值：

var $dropDown = $('#exampleID');
$dropDown.data('placeholder', $dropDown.find('option:selected').text());

【讨论】：