动作取决于选择的选项值？

时间：2017-11-01 06:35:07

标签： jquery html css css3

我需要根据选择框的选定值更改选择框及其行的颜色。就像我试过的那样，每个组合都有3个选择框和3个选项。 如何在每个选择框上选择的每个选项上进行颜色更改？

＆＃13;
＆＃13; 
.row {
  padding: 10px 20px;
  background: purple;
}

select {
  width: 100px;
  height: 40px;
  background: #eee;
  border: 1px solid #333;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary" selected>Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary" selected>Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>

<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional" selected>Optional</option>
    </select>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13; 其实我想要这样的结果？ enter image description here 关于我将管理的自定义选择框。它只是为不同的颜色添加特定的类。

5 个答案:

答案 0 :(得分：1)

保留颜色字典，并相应地在选择框更改时更改颜色。以下是示例代码：

var color = {'primary':'red', 'secondary': 'blue', 'optional':'gray'};

$('.impSelect').click(function(){
$(this).css('background-color', color[$(this).val()]);
});
$('.impSelect').click();
.row {
  padding: 10px 20px;
  background: purple;
}

select {
  width: 100px;
  height: 40px;
  background: #eee;
  border: 1px solid #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <select id="impSelect" class="impSelect">
      <option value="primary" selected>Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col">
    <select id="impSelect" class="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary" selected>Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>

<div class="row">
  <div class="col">
    <select id="impSelect" class="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional" selected>Optional</option>
    </select>
  </div>
</div>

答案 1 :(得分：1)

更改选择按钮的功能时执行addClass。将类添加到父级。使用closest() jquery函数

命名row类

＆＃13;
＆＃13; 
$('.row').on('change','select',function(){
$(this).attr('class','').addClass($(this).val()).closest('.row').attr('class','row').addClass($(this).val())
})
$(function(){
$('.row select').each(function(){
$(this).attr('class','').addClass($(this).val()).closest('.row').attr('class','row').addClass($(this).val())
})
})
＆＃13; 
.row {
  padding: 10px 20px;
  background: purple;
}

select {
  width: 100px;
  height: 40px;
  background: #eee;
  border: 1px solid #333;
}
.primary{
background-color:red;
}
.optional{
background-color:blue;
}
.secondary{
background-color:#aaa;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary" selected>Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary" selected>Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>

<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional" selected>Optional</option>
    </select>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

这样做的一种方法是将change事件处理程序绑定到目标选择元素。在下面的代码段中，我绑定了所有select元素，但您可以通过CSS类或后代选择器选择它们。

然后，您可以定义CSS类以为select提供所需的样式。在代码片段中，我保持CSS类名称等于select的预期值。因此，向primary添加课程select将应用红色背景和白色。 

select.primary {
  background-color: red;
  color: white;
}

因此，当select中的值发生更改时，您只需删除其上的现有类，然后应用新类。

＆＃13;
＆＃13; 
$("select").on("change", function() {
  // Remove the other classes.
  $(this).attr("class","");

  // Add the new class as per the value selected.
  var value = $(this).val();
  $(this).addClass(value);
});

// Apply the colors initially.
$("select").each(function(){
  var value = $(this).val();
  $(this).addClass(value);
});
＆＃13; 
.row {
  padding: 10px 20px;
  background: purple;
}

select {
  width: 100px;
  height: 40px;
  background: #eee;
  border: 1px solid #333;
}

select.primary {
  background-color: red;
  color: white;
}

select.secondary {
  background-color: purple;
  color: white;
}

select.optional {
  background-color: gray;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary" selected>Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary" selected>Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>

<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional" selected>Optional</option>
    </select>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

  1. 使用与选择选项名称相同的类声明样式表中的颜色。例如。

    .mandatory { background: red; color: white;} .optional { background: purple; color: white;}

  2. 使用jQuery

    分配选择更改的类

    $(document).ready(function(){ $('select').on('change', function(){ var thisSelect = $(this); var optionSelected = thisSelect.find("option:selected"); var optionName = optionSelected.attr('value'); thisSelect.removeClass().addClass(optionName); }); });

答案 4 :(得分：1)

您可以使用change上的javascript（jQuery）select事件来实现此目的，并使用closest()进行父选择，例如：

$('select').on('change', function() {
  var value = $(this).find(':selected').text();
  if(value == 'Primary') {
    $(this).parent().closest('.row').addClass('primary');
    $(this).parent().closest('.row').removeClass('secondary optional');
  } else if(value == 'Secondary') {
    $(this).parent().closest('.row').addClass('secondary');
    $(this).parent().closest('.row').removeClass('primary optional');
  } else {
    $(this).parent().closest('.row').addClass('optional');
    $(this).parent().closest('.row').removeClass('primary secondary');
  }
});

查看下面的工作代码段：

$('select').each(function() {
  var text = $(this).find(':selected').text();
  if(text == 'Primary') {
    $(this).parent().closest('.row').addClass('primary');
    $(this).parent().closest('.row').removeClass('secondary optional');
  } else if (text == 'Secondary') {
    $(this).parent().closest('.row').addClass('secondary');
    $(this).parent().closest('.row').removeClass('primary optional');
  } else {
    $(this).parent().closest('.row').addClass('optional');
    $(this).parent().closest('.row').removeClass('primary secondary');
  }
});

$('body').on('change', 'select', function() {
  var value = $(this).find(':selected').text();
  if(value == 'Primary') {
    $(this).parent().closest('.row').addClass('primary');
    $(this).parent().closest('.row').removeClass('secondary optional');
  } else if(value == 'Secondary') {
    $(this).parent().closest('.row').addClass('secondary');
    $(this).parent().closest('.row').removeClass('primary optional');
  } else {
    $(this).parent().closest('.row').addClass('optional');
    $(this).parent().closest('.row').removeClass('primary secondary');
  }
});


$('#btnAddEmpField').on('click', function(){
	$('.emp-customize-form').append("<div class='row secondary'>\
  <div class='col'>\
    <select id='impSelect1'>\
      <option value='primary'>Primary</option>\
      <option value='secondary' selected>Secondary</option>\
      <option value='optional'>Optional</option>\
    </select>\
  </div>\
</div>");
})
                    
.row {
  padding: 10px 20px;
  background: purple;
}

select {
  width: 100px;
  height: 40px;
  background: #eee;
  border: 1px solid #333;
}

.primary {
  color: white;
  background-color: red;
}

.secondary {
  color: white;
  background-color: green;
}

.optional {
  color: white;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="emp-customize-form">
  <div class="row">
    <div class="col">
      <select id="impSelect1">
        <option value="primary" selected>Primary</option>
        <option value="secondary">Secondary</option>
        <option value="optional">Optional</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <select id="impSelect2">
        <option value="primary">Primary</option>
        <option value="secondary" selected>Secondary</option>
        <option value="optional">Optional</option>
      </select>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <select id="impSelect3">
        <option value="primary">Primary</option>
        <option value="secondary">Secondary</option>
        <option value="optional" selected>Optional</option>
      </select>
    </div>
  </div>
</div>

<span id="btnAddEmpField">add</span>

希望这有帮助！

相关问题
最新问题