Question

以下代码是JavaScript附加功能的片段：

var $newLi = $("<li><div1><img src='" + src + "' id='logo" + counter + "' name='logo" + counter + "'/></div1><div2><input type='text' id='college" + counter + "' name='college" + counter + "' value='" + task + "' readonly/></div2><div4><input type='text' id='sports" + counter + "' name='sports" + counter + "' value='" + sports + "' readonly/></div4><div5><input type='text' id='interest" + counter + "' name='interes" + counter + "' value='" + interest + "' readonly/></div5></li>");

以下是html下拉列表：

<form name="newItem" id="newItem">
    <select id="interestresults" required>
        <option value="">Select Level of Interest...</option>
        <option>Low</option>
        <option>Medium</option>
        <option>High</option>
        <option>Extreme</option>
    </select>
    <button type="reset" id="reset">Reset</button>
    <input type="button" id="addItem" value="Add" />
</form>

因此，基本上，正在发生的事情是在按钮点击时附加一个列表并创建4个div。 div1，div2和div4无关紧要。 div5虽然是我的目标。

创建div5并显示＆＃34;兴趣＆＃34;从下拉列表中选择并提交的文本。兴趣选择是＆＃34;低＆＃34;，＆＃34;中＆＃34;，＆＃34;高＆＃34;和＆＃34;极端＆＃34;。目前，div5 css背景设置为绿色，但是，我的问题是如何根据从下拉列表中选择的兴趣选项设置div5背景颜色。例如，如果选择低，则div5将为红色，如果选择极限，则div5将为绿色。

感谢。希望我的解释足够了。

这里有完整的JavaScript：

$("#addItem").click(function() {
            if (maxAppend >= 10) return;
                var task = $('#searchresults').val();
                var sports = $('#sportsresults').val();
                var interest = $('#interestresults').val();

                var src = $('#searchresults').find(":selected").attr('data-src');

                var $newLi = $("<li><div1><img src='" + src + "' id='logo" + counter + "' name='logo" + counter + "'/></div1><div2><input type='text' id='college" + counter + "' name='college" + counter + "' value='" + task + "' readonly/></div2><div4><input type='text' id='sports" + counter + "' name='sports" + counter + "' value='" + sports + "' readonly/></div4><div5><input type='text' id='interest" + counter + "' name='interest" + counter + "' value='" + interest + "' readonly/></div5></li>");
                    $newLi.attr("id", "newLi" + counter++);
            maxAppend++;
                    $("#tasks").append($newLi);

                    $('#searchresults').find(":selected").remove();
                    $('#sportsresults option').prop('selected', function() {
                        return this.defaultSelected;
                    });

                });

        $('#deleteall').click(function(e) {
            $('#tasks').children().last().remove();
        });
    });

Answer 1

您似乎跳过了<select>标记及其目的的文档。

<select>标记用于允许用户选择<option>，并将其value设置为<select>。

向value元素添加<option>个属性，并使用$('#interestresults').val()获取当前选定的值。这是一个任意的例子，基于我对你当前代码的建议：

$(document)
  .on('click', '#addItem', function () {
    var ul = $('#results'),
        select = $('#interestresults'),
        color = select.val(),
        text = select.find('option:selected').text();
    if (color && 10 > ul.find('li').length) {
      ul.append($('<li />', {
        text: text,
        style: "background-color:" + color
      }))
    }
  })
  .on('click', '#reset', function () {
    $('#results').html('');
  })

#results {
  list-style-type:none;
  color: white;
  padding: 0;
}
#results li {
  padding: .5rem;
  border: 1px solid rgba(0,0,0,.12);
  border-top: 1px solid rgba(255,255,255,.21)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="newItem" id="newItem">
  <select id="interestresults" required>
    <option value="">Select Level of Interest...</option>
    <option value="red">Low</option>
    <option value="orange">Medium</option>
    <option value="blue">High</option>
    <option value="green">Extreme</option>
  </select>
  <button type="reset" id="reset">Reset</button>
  <input type="button" id="addItem" value="Add" />
</form>

<ul id="results">
  
</ul>

根据下拉选择设置附加div的颜色

1 个答案: