从选定的引导下拉选项获取价值

问题描述：

我正在学习开发，我想要的是带有3个背景图像选项的引导下拉框，然后通过选定的选项更改背景。目前我无法找到如何获得所选选项的价值。我搜索了高和低来找到如何获得选定的选项的价值，然后使用它，但我找不到任何东西。即使bootstrap文档也很模糊。从选定的引导下拉选项获取价值

到目前为止下拉呈现好的...

<div class="dropdown open"> 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Background 
      </button> 
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
      <a class="dropdown-item" href="#">Image 1</a> 
      <a class="dropdown-item" href="#">Image 2</a> 
      <a class="dropdown-item" href="#">Image 3</a> 
      </div> 
     </div>

但后来我被卡住......

$('#dropdownMenuButton').on('hidden.bs.dropdown', function() { 
    // get selected option and change background 
})

我可以改变背景，但我只是无法得到的值选定的选项。

我不敢相信这是如此困难，所以我明显失去了一些东西。请任何人都可以帮忙？

感谢，

你试图让文本值或href值？ – bob

答

这将返回该项目的文本值点击。请注意，这不是select元素。

$('.dropdown-item').click(function() { 
    console.log($(this).text()); 
});

谢谢。像魅力一样工作。不能认为我出错的地方很简单。 –

答

取而代之的是 “hidden.bs.dropdown” 事件中，你可以监听click事件上 “下拉菜单项目” 的：

$('#dropdownMenuButton + [aria-labelledby="dropdownMenuButton"] a').on('click', function (e) { 
 
    e.preventDefault(); 
 
    // get selected option and change background 
 
    var ele = this; 
 
    console.log(ele.textContent); 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="dropdown open"> 
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     Background 
 
    </button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
     <a class="dropdown-item" href="#">Image 1</a> 
 
     <a class="dropdown-item" href="#">Image 2</a> 
 
     <a class="dropdown-item" href="#">Image 3</a> 
 
    </div> 
 
</div>

从选定的引导下拉选项获取价值

相关推荐