Question

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

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

＆＃13;

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);
  });
});

＆＃13;

<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>

＆＃13;

更新

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

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

Answer 1

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

＆＃13;

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);
  });
});

＆＃13;

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

＆＃13;

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);
  });
});

＆＃13;

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

1 个答案: