更改下拉列表中的选定文本？答案

【问题标题】：Changing the selected text in dropdown?更改下拉列表中的选定文本？
【发布时间】：2015-12-15 14:04:42
【问题描述】：

我想更改单击按钮时下拉列表的选定值。在 class= '.WHERE' 的 div 中有几个下拉列表，我想在第一个下拉列表和倒数第二个下拉列表中添加一个括号
按钮调用这个函数：

//add parenthesis to the first child, and to the second to last child
    function addParens(){
      var len = $(".WHERE").children('div > select').length;
      len -= 1;

      var firstDropdown = $('.WHERE').children().first(); //the first child
      var lastDropdown = $('.WHERE').children().eq(len);  //the second to last child
//attempting here to append left parenthesis to the first dropdown
          var text = firstDropdown.val(); //the old selected option
          text = '(' + text; //new text with left parenthesis
          console.log(text);  //prints out correctly
          firstDropdown.text(text); //tried ,doesn't work
          var firstId = firstDropdown.attr('id'); //grab id firstDropdown
          $('#'+firstId).val(text); //doesn't work by grabbing id first
          firstDropdown.val(text); //also tried this, doesn't work




    }

之后，如果我打印 firstDropwdown.val() 它会打印 null，并且下拉菜单没有选择任何内容。这是一个下拉列表的示例，它是动态创建的

【问题讨论】：

喜欢这个？ jsfiddle.net/27nskcf5
是的！行得通，谢谢

标签： javascript jquery drop-down-menu

【解决方案1】：

function addParens() {
  var len = $(".WHERE").children('div > select').length;
  len -= 1;

  var children = $('.WHERE').children();
  var firstDropdown = children.first().find("option:selected"); //the first child
  var lastDropdown = children.eq(len).find("option:selected"); //the second to last child
  firstDropdown.text('(' + firstDropdown.text() + ')');
  lastDropdown.text('(' + lastDropdown.text() + ')');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="WHERE">
  <select>
    <option></option>
    <option>Article.Author</option>
    <option>Article.Editor</option>
    <option>Article.Publisher</option>
    <option>Article.Title</option>
    <option>Article.BookTitle</option>
    <option>Article.Year</option>
  </select>
  <select>
    <option></option>
    <option>Article.Author</option>
    <option>Article.Editor</option>
    <option>Article.Publisher</option>
    <option>Article.Title</option>
    <option>Article.BookTitle</option>
    <option>Article.Year</option>
  </select>
  <select>
    <option></option>
    <option>Article.Author</option>
    <option>Article.Editor</option>
    <option>Article.Publisher</option>
    <option>Article.Title</option>
    <option>Article.BookTitle</option>
    <option>Article.Year</option>
  </select>
  <select>
    <option></option>
    <option>Article.Author</option>
    <option>Article.Editor</option>
    <option>Article.Publisher</option>
    <option>Article.Title</option>
    <option>Article.BookTitle</option>
    <option>Article.Year</option>
  </select>
</div>
<button onClick="addParens();">
DO IT
</button>

【讨论】：