Question

好的，我有json响应创建下拉菜单。在这个共鸣中，我选择了ID，名称和第3个选项。我试图添加如果bouth值为false，添加文本选项将被禁用和（称为选择选项）。任何想法如何做到这一点？

var arr = [{"uid":"95bf721c-8c24-432e-83e4-7233169f23fa","name":"MARKETING I MARKETING MENAD\u017dMENT","selected":false},{"uid":"ed4293ff-9c89-4052-9fec-852d34c6150d","name":"PRODAJA I MENAD\u017dMENT PRODAJE","selected":true}];

var sel = $('<select/>');
for (var i = 0;i<arr.length;i++) {
    var obj = arr[i];
    var opt = $('<option/>');
    opt.val(obj.uid).text(obj.name)[0].selected = obj.selected;
    sel.append(opt);
}
$('.placeholder').append(sel);

在小提琴例子中 http://jsfiddle.net/xhh4wqv7/

Answer 1

试试这个，

var arr = [{
  "uid": "95bf721c-8c24-432e-83e4-7233169f23fa",
  "name": "MARKETING I MARKETING MENAD\u017dMENT",
  "selected": false
}, {
  "uid": "ed4293ff-9c89-4052-9fec-852d34c6150d",
  "name": "PRODAJA I MENAD\u017dMENT PRODAJE",
  "selected": false
}];
var totalFalse = 0;
var sel = $('<select/>');
for (var i = 0; i < arr.length; i++) {
  var obj = arr[i];
  if (obj.selected == false) {
    totalFalse++;
  }
  var opt = $('<option/>');
  opt.val(obj.uid).text(obj.name)[0].selected = obj.selected;
  sel.append(opt);
}
// if total false options then add text option to dropdown
if (totalFalse == arr.length) {
  sel.append('<option>Add Text</option>');
}
$('.placeholder').append(sel);

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

Answer 2

您可以声明并检查是否有obj.selected为真。您也可以使用.prop()设置属性值。

    var sel = $('<select/>');

    //Declare a variable to check if options is selected 
    var hasSelected = false;

    for (var i = 0; i < arr.length; i++) {
        var obj = arr[i];
        var opt = $('<option/>',
                    {
                        value:obj.uid,
                        text: obj.name
                    }).prop("selected", obj.selected);
        sel.append(opt);

        //If any selected is true then it will set variable as false
        if(obj.selected){
           hasSelected = true; 
        }
    }

    //Check if all selected is false 
    if(hasSelected == false){
        var opt = $('<option/>',
                    {
                        text: "Choose option"
                    })
        .prop("disabled", true) //Set option as disabled
        .prop("selected", true); //Set it as selected
        sel.append(opt);
    }

DEMO

Answer 3

添加了硬编码选择munu作为首选无选择目的。可以找到它@ FIDDLE

var noOption = '<option>choose option</option>';
sel.append(noOption);

所以你的js代码将是

var arr = [{"uid":"95bf721c-8c24-432e-83e4-7233169f23fa","name":"MARKETING I MARKETING MENAD\u017dMENT","selected":false},{"uid":"ed4293ff-9c89-4052-9fec-852d34c6150d","name":"PRODAJA I MENAD\u017dMENT PRODAJE","selected":false}];

var sel = $('<select/>');
var noOption = '<option id="noOpt">choose option</option>';
sel.append(noOption);
for (var i = 0;i<arr.length;i++) {
    var obj = arr[i];
    var opt = $('<option/>');
    opt.val(obj.uid).text(obj.name)[0].selected = obj.selected;
    sel.append(opt);
}
$('.placeholder').append(sel);

sel.on('change', function(){
    $('#noOpt').val('');
    alert($('#noOpt').val());
});

每个OP更新，要求删除第一个选项值。

Answer 4

我猜你需要这样的东西：

＆＃13;

var arr = [{
  "uid": "95bf721c-8c24-432e-83e4-7233169f23fa",
  "name": "MARKETING I MARKETING MENAD\u017dMENT",
  "selected": false
}, {
  "uid": "ed4293ff-9c89-4052-9fec-852d34c6150d",
  "name": "PRODAJA I MENAD\u017dMENT PRODAJE",
  "selected": true
}];

var sel = $('<select/>'),
    found = false,
  choose = '<option>Choose</option>';

$.each(arr, function(i, obj) {
  $('<option/>', {
    value: obj.uid,
    text: obj.name,
    "selected":obj.selected
  }).appendTo(sel);
  
   found = !obj.selected;
  
});

  if(found){
     sel.prepend(choose);
  }



$('.placeholder').append(sel);

＆＃13;

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

＆＃13;

Answer 5

Check Demo here:
When no any value in array selected, then new option will selected as true.

http://jsfiddle.net/umesh195sehta/xhh4wqv7/7/

使用jquery创建下拉菜单

5 个答案: