单击带有类占位符的选项后更改选择标记的颜色

Question

我的代码如下所示

$(document).ready(function{
	
	$('.#situation').on("click", function{
		console.log('clicked');
		
	});
	
	
});

.placeholder_color{
	color: #828282;
}

<select name="situation" id="situation">
  <option selected="selected">Current Situation</option>
  <option class="placeholder_color" value="Unemployed">Unemployed</option>
  <option class="placeholder_color" value="Employed">Employed</option>

</select>

目前，选择标签具有您可以看到的颜色，几乎就像一个占位符。 当我单击具有类占位符的选项标签时，我希望能够更改文本颜色。

我该怎么做？

Answer 1

您应该在 select 而不是 option 上创建 on change 事件。然后找到 selected 选项并检查所选选项是否 hasClass placeholder 。如果是这样，请将Class live 添加到 select 。如果不是，则从select 中删除类live

见下面的sn-p

如果有帮助请告诉我

$('select').on("change", function() {
  var opt = $(this).find("option:selected")
  if ($(opt).hasClass("placeholder")) {
    $(this).addClass("live")
  } else {
    $(this).removeClass("live")
  }
});

#situation {
  color: #828282;
}
#situation option {
	color:#828282;
}
#situation.live {
  color: red;
}

select {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}
/* for IE */
select::-ms-expand {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="situation" id="situation">
  <option selected="selected">Current Situation</option>
  <option class="placeholder" value="Unemployed">Unemployed</option>
  <option class="placeholder" value="Employed">Employed</option>
  <option selected="selected">Current Situation</option>
</select>

Answer 2

这会解决你的问题

jQuery(document).ready(function($) {
  $('#situation').on("click", function(){
    $('.placeholder').toggleClass('live');
  });		
});

#situation{
  color: #828282;
}

.live{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="situation" id="situation">
	<option class="placeholder" value="Unemployed"> Unemployed </option>
	<option class="placeholder" value="Employed"> Employed </option>
</select>

Answer 3

点击选项有点棘手。您可以在选择框上使用更改触发器，但是找出占位符类可能有点困难。因此，您可以使用以下内容来满足您的需求。

$(document).ready(function() {
  $('#situation').on('click', function(ev) {
    if (ev.offsetY < 0) {
      //user clicks on option
      $(this).toggleClass("live");
    }
  });
});

#situation, #situation option {
  color: #828282;
}

#situation.live {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="situation" id="situation">
	<option selected="selected">Current Situation</option>
	<option class="placeholder" value="Unemployed">Unemployed</option>
	<option class="placeholder" value="Employed">Employed</option>
</select>