Question

我做了一个下拉列表，它应该改变div的边框样式。我使用了select和option html标签。执行.change（）事件时，我希望将边框样式更改为当前选择值。请告诉我正确的。这是一个JSFiddle链接。

这是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').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的边框样式

4 个答案: