我无法使用 select 更改 div 的边框样式

Question

我做了一个下拉菜单，它应该改变 div 的边框样式。我正在使用 select 和选项 html 标签。当执行 .change() 事件时，我期望将边框样式更改为当前的 select 值。请告诉我正确的。这里有一个JSFiddlelink.

这里是js代码

$(function() {
   $("select").change(function() {
     var getChoice = $("select option:selected").val();
     $('.active').css('borderStyle', getChoice);
   });
});

Answer 1

只需将val()更改为text()

发件人：

$("select option:selected").val();

至：

$("select option:selected").text();

Answer 2

您可以将 value 添加到每个 option，然后像这样使用它：

<select id="me">
  <option value="volvo">Border-style</option>
  <option id="b-style" value="Solid">Solid</option>
  <option id="b-style" value="Dotted">Dotted</option>
  <option id="b-style" value="Dashed">Dashed</option>
  <option id="b-style" value="Double">Double</option>
  <option id="b-style" value="Mixed">Mixed</option>
  <option id="b-style" value="Remove">Remove</option>
</select>

$(function() {
  $("select").change(function() {
    $('.active').css("border-style", $(this).val());
  });
});

已更新fiddle

Answer 3

使用 Id var getChoice = $("#me :selected").text();

$(function(){
$('select').on('change', function() {
    var getChoice = $("#me :selected").text();
    $('.active').css('borderStyle', getChoice);
});
});

.active{
  height: 50px;
  width: 50px;
  border: 5px dotted grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="me">
  <option value="volvo">Border-style</option>
  <option id="b-style" value="">Solid</option>
  <option id="b-style" value="">Dotted</option>
  <option id="b-style" value="">Dashed</option>
  <option id="b-style" value="">Double</option>
  <option id="b-style" value="">Mixed</option>
  <option id="b-style" value="">Remove</option>
  
</select>

<div class="active"></div>

Answer 4

您好，您在代码中重复了 id。 Id 应该始终是唯一的，您只需要获取 select 字段的值即可。

请参考以下片段

$('select').change(function(){
  $('div').css({'border-style':$(this).val()});
});

div{
width:120px;
height:120px;
border:1px solid #333;
}

<html>
<body>
<div>

</div>
  <select>
    <option value='dashed'>dashed</option>
    <option value='dotted'>dotted</option>
    <option value='double'>double</option>
    <option value='mixed'>mixed</option>
  </select>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

我无法使用 select 更改 div 的边框样式

i can't change the border style of a div using select

html

javascript

css

jquery

html-select