Question

我是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 var。

中

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

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

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

提前感谢您的帮助！

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

Answer 2

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

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

如何根据动态提供的id更新元素的占位符属性？

2 个答案: