Question

我有这个jsfiddle

这是我的程序

var desired_var = 'Three';
var datafort1 = ["One", "Two", "Three", "Four", "Five"];
var html = '<div>\
    <div class="lt_div">\
    <select id="T1Select" tabindex="1" style="width:100%;">';
for (var i = 0; i < datafort1.length; i++) {
    var val = datafort1[i];
    if (val) {
        html += '<option value="' + datafort1[i] + '">' + datafort1[i] + '</option>';
    }
}
html +=
    '</select>\
    </div>\
    <div>\
    <a  class="btn mini green" id="forT1" title="Add FOR T1"><i>+</i></a>\
    </div>\
    </div>';
$("#T1").append(html);
// For Change in T1
$(document).on('change', '#T1Select', function (event) {
});

这里我想在下拉后显示加号，只有选择了三。

Answer 1

最初隐藏它并将其添加到您的更改事件中：

$('.btn').toggle(this.value === 'Three');

http://jsfiddle.net/y3aragzc/1/

Answer 2

首先你必须在css中隐藏加号：

#forT1 {
    display: none;
}

在js中你想要在选择3时显示/隐藏：

$("#forT1").toggle($(this).val() == "Three");

＆＃13;

var desired_var = 'Three';

var datafort1 = ["One", "Two", "Three", "Four", "Five"];

var html = '<div>\
    <div class="lt_div">\
    <select id="T1Select" tabindex="1" style="width:100%;">';

for (var i = 0; i < datafort1.length; i++) {
  var val = datafort1[i];
  if (val) {
    html += '<option value="' + datafort1[i] + '">' + datafort1[i] + '</option>';
  }
}


html +=
  '</select>\
    </div>\
    <div>\
    <a  class="btn mini green" id="forT1" title="Add FOR T1"><i>+</i></a>\
    </div>\
    </div>';
$("#T1").append(html);

// For Change in T1
$(document).on('change', '#T1Select', function(event) {

  $("#forT1").toggle($(this).val() == "Three");

});

＆＃13;

.lt_div {
  width: 80%;
  float: left;
}
#forT1 {
  display: none;
}
.btn {
  width: 10%;
  float: left;
  padding: 2px;
  background: green;
  margin-left: 10px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cascade" id="T1"></div>

＆＃13;

Answer 3

改变你的小提琴，现在它有效。

http://jsfiddle.net/y3aragzc/3/

$(document).on('change', '#T1Select', function(event) {
    var strVal = $(this).val();
    if(strVal == 'Three') {
    $(this).parent().after("<div id=\"plus\"><a  class=\"btn mini green\" id=\"forT1\" title=\"Add FOR T1\"><i>+</i></a></div>");
    } else {
        $("#plus").remove();
    }

});

Answer 4

如果不进行测试，方法应该是这样的：

$(document).on('change', '#T1Select', function (event) {
    // the select field
    var $elm = $(this);
    // value has to be three - add an element after field
    if( $elm.val() === 'Three') {
        $elm.after('<span class="plus">+</span>');
    // otherwise remove it.
    } else {
        $elm.next('.plus').remove();
    }
});

Answer 5

$(document).on('change', '#T1Select', function (event) {
    if( $(this).val() == desired_var ){
        alert("here we are");
    }
});

如果下拉列表与特定情况匹配，如何在下拉列表后显示加号标记

5 个答案: