jQuery 使用两个下拉列表更改输入 css 样式

jQuery Change input css style with two dropdown

本文关键字：下拉列表 输入 样式 css 两个 jQuery      更新时间：2023-09-26

我有两个下拉列表和一个输入字段，输入字段中是文本。在第一个下拉列表中，我有字体：Arial，Impact...在第二个字段中，我有颜色：红色，蓝色...

我想要的只是当我选择字体和颜色来更改输入字段中的文本时。现在字体已更改，我也在尝试弄清楚如何更改颜色。

jQuery(document).ready(function() {
  jQuery(".product-options dd select").change(function() {
    var str = "";
    jQuery(".product-options dd select option:selected").each(function() {
      str += jQuery(this).text();
    });
    jQuery(".product-options dd input.input-text").css('font-family', str);
  });
});
<div id="product-options-wrapper" class="product-options">
  <dd>
    <div class="input-box">
      <select id="select_9" class="product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[9]">
        <option value="">-- Please Select --</option>
        <option price="0" value="42867">standard skrifttype</option>
        <option price="0" value="36">Arial</option>
        <option price="0" value="37">Lato</option>
        <option price="0" value="42871">Impact</option>
      </select>
    </div>
  </dd>
  <dd class="last">
    <div class="input-box">
      <select id="select_6022" class="product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6022]">
        <option value="">-- Please Select --</option>
        <option price="0" value="42958">red</option>
        <option price="0" value="42957">blue</option>
        <option price="0" value="42959">green</option>
      </select>
    </div>
  </dd>
  <dd>
    <div class="input-box">
      <ul id="options-6022-list" class="options-list">
        <li>
		  <input id="options_6022" class="radio product-custom-option" type="radio" checked="checked" value="" onclick="opConfig.reloadPrice()" name="options[6022]">
		  <span class="label">
		  <label for="options_6022">None</label>
		  </span>
        </li>
        <li>
		  <input id="options_6022_2" class="radio product-custom-option" type="radio" price="0" value="42959" name="options[6022]" onclick="opConfig.reloadPrice()">
		  <span class="label">
		  <label for="options_6022_2">black </label>
		  </span>
        </li>
        <li>
		  <input id="options_6022_3" class="radio product-custom-option" type="radio" price="0" value="42958" name="options[6022]" onclick="opConfig.reloadPrice()">
		  <span class="label">
		  <label for="options_6022_3">blue </label>
		  </span>
        </li>
        <li>
		  <input id="options_6022_4" class="radio product-custom-option" type="radio" price="0" value="42957" name="options[6022]" onclick="opConfig.reloadPrice()">
		  <span class="label">
		  <label for="options_6022_4">red </label>
		  </span>
        </li>
      </ul>
    </div>
  </dd>
  <dd>
    <div class="input-box">
      <input id="options_11_text mirror" class="input-text validate-length maximum-length-25 product-custom-option form-control" type="text" value="" name="options[11]" onchange="opConfig.reloadPrice()" style="font-family: -- Please Select --blå;">
      <p class="note">Maximum number of characters:<strong>25</strong>
      </p>
    </div>
  </dd>
</div>

更新：

我尝试像这样使用代码，但我不知道出了什么问题：

jQuery('select.change-color').change(function () {
    jQuery('.product-options input.input-text').css('font-family', jQuery('option:selected', this).attr('data-color'));
});

对于字体下拉列表，您可以使用：

jQuery(document).ready(function() {
  jQuery(".product-options dd select").change(function() {
    var str = $(this).find("option:selected").text();
    jQuery(".product-options dd input.input-text").css("font-family", str);
  });
});

对于彩色单选按钮，请使用：

jQuery(document).ready(function() {
  jQuery(".product-options dd :radio").click(function() {
    var str = $(this).next().find("label").text();
    jQuery(".product-options dd input.input-text").css("color", str);
  });
});

相关文章：