Question

我有一个工作的Javascript下拉，它来自Json文件。它完美无缺。

我正在试图弄清楚如何使用Twitter Bootstrap来设置我的按钮和特征的样式3.我知道Bootstrap 3，我只是对如何访问我的javascript组件来设置它们的风格感到困惑。

这个html在我的index.html文档中调用我的代码

<div id='form-wrapper'></div>

这是确定下拉列表功能的Javascript / Json。

// The JSON this is all pulled from
var json = {
    "Apple": {
        "A / C": {
            "weight": 6,
            "price": 3.99
        },
        "B": {
            "weight": 7,
            "price": 4.99
        }
    },
    "Orange": {
        "1": {
            "weight": 4,
            "price": 4.49
        },
        "2": {
            "weight": 5,
            "price": 5.49
        }
    }
};

// Correct JSON data
for (var a in json) {
    for (var attr in json[a]) {
        if (/\//.test(attr)) {
            var attrs = attr.split(/\s*\/\s*/);
            for (var x = 0, y = attrs.length; x < y; ++ x) {
                json[a][attrs[x]] = json[a][attr];
            }
            json[a][attr] = null;
        }
    }
}

var form_wrapper = document.getElementById("form-wrapper");

// Create the first dropdown
var dropdown1 = document.createElement("select");

// Populate the first dropdown
var option = document.createElement("option");
option.innerHTML = "Select a fruit";
option.value = "none";
dropdown1.appendChild(option);

// Add options from JSON
for (var attr in json) {
    var option = document.createElement("option");
    option.innerHTML = option.value = attr;
    dropdown1.appendChild(option);
}

// Create the second dropdown
var dropdown2 = document.createElement("select");
var option = document.createElement("option");
option.innerHTML = "N/A";
dropdown2.appendChild(option);

// Add weight field
var weight = document.createElement("div");

// Add price field
var price = document.createElement("div");

// Function to automatically fill the weight/price fields
var auto_fill_fields = function() {

    if (dropdown1.value != "none") {
        var obj = json[dropdown1.value][dropdown2.value];
        var weight_str = "Weight: " + obj.weight + " oz";
        var price_str = "Price: $" + obj.price;
    } else {
        var weight_str = "Weight: N/A";
        var price_str = "Price: N/A";
    }

    weight.innerHTML = weight_str;
    price.innerHTML = price_str;
};

// Handle changing the first dropdown
dropdown1.addEventListener("change", function() {
    // Remove the current options from the second dropdown
    $(dropdown2).empty();

    // Did they actually select a fruit?
    if (this.value != "none") { // Yes
        // Populate the second dropdown
        var names = [];
        for (var attr in json[this.value]) {
            if (json[this.value][attr] == null) {
                continue;
            }
            names.push(attr);            
        }
        console.log(names);
        names = names.sort();
        console.log(names);
        for (var x = 0, y = names.length; x < y; ++ x) {
            var option = document.createElement("option");
            option.innerHTML = option.value = names[x];
            dropdown2.appendChild(option);
        }
    } else { // No
        // There's nothing to choose
        var option = document.createElement("option");
        option.innerHTML = "N/A";
        dropdown2.appendChild(option);
    }

    auto_fill_fields();
});

// Handle changing the second dropdown
dropdown2.addEventListener("change", auto_fill_fields);

// Fill in initial values
auto_fill_fields();

// Add submit button
var submit = document.createElement("button");
submit.innerHTML = "submit";
submit.addEventListener("click", function() {
    if (dropdown1.value == "none") {
        return;
    }
    var obj = json[dropdown1.value][dropdown2.value];
    var weight_str = "Weight: " + obj.weight + " oz";
    var price_str = "Price: $" + obj.price;
    var request_str = dropdown1.value + " " + dropdown2.value + " - " + weight_str + ", " + price_str;
    console.log(request_str);
    $.ajax({
        url: "SOMEPLACE",
        data: {
            "key": request_str
        }
    });
});

window.addEventListener("load", function() {
    // Add the first dropdown to the page (body)
form_wrapper.appendChild(dropdown1);
    // Add the second dropdown to the page (body)
    form_wrapper.appendChild(dropdown2);
    // And the rest
    form_wrapper.appendChild(weight);
    form_wrapper.appendChild(price);
    form_wrapper.appendChild(submit);
});

Answer 1

JavaScript正在为您创建HTML。如果您安装了Chrome，请右键单击页面上的下拉列表（控制+单击Mac），然后从菜单中选择“检查元素”。（其他浏览器也可以这样做。当您按F12时，大多数浏览器都会显示有用的开发工具。）

这将允许您浏览JavaScript生成的HTML。

更新：根据评论中的后续问题，这是在值为N / A时附加类的一种方法。这取代了原始帖子中的auto_fill_fields功能。

// Function to automatically fill the weight/price fields
var auto_fill_fields = function() {

  if (dropdown1.value != "none") {
    var obj = json[dropdown1.value][dropdown2.value];
    var weight_str = "Weight: " + obj.weight + " oz";
    var price_str = "Price: $" + obj.price;
  } else {
    var weight_str = "Weight: N/A";
    var weight_class = "not-available";
    var price_str = "Price: N/A";
    var price_class = "not-available";
  }

  weight.innerHTML = weight_str;
  if (weight_class) {
    weight.className = weight_class;
  }
  price.innerHTML = price_str;
  if (price_class) {
    price.className = price_class;
  }
};

Answer 2

我想出了一个超级简单的方法而不改变我做过的任何事情。在我声明了我想要设计的变量之后，我只是简单地把它放在后面。

varName.className = "Class";

样式Javascript下拉列表

2 个答案: