使用jQuery使用optgroup填充select

时间:2016-02-10 21:47:43

标签: javascript jquery html json

我尝试使用jQuery以编程方式使用optgroupoption标记填充<select id="profile_title" name="profile_title"> <optgroup label="Backers"> <option value="civi">Civilian</option> <option value="scot">Scout</option> </optgroup> <optgroup label="Other Titles"> <option value="apex">Apex Predator</option> <option value="etc">Etc etc..</option> </optgroup> </select> 标记。我已经使用JSHint调试了代码(至少它表示没有错误),并且大多数情况下它至少会调出选择框。但是它没有把数据放进去。

代码:Updated Example

数据:JSFiddle

我希望输出以下内容:

Private Sub ConnectorCoverProductionForm_Initialize()

'Empty Serial_NumberTextBox
Serial_Number.Value = ""
Serial_Number.SetFocus

'Empty Order_NumberTextBox
Order_Number.Value = ""

'Empty DateTextBox
TextBox1.Value = ""

Inspector.Clear
Assembler.Clear
Process_Code.Clear

'Uncheck OptionButton
OptionButton1.Value = False
OptionButton2.Value = False
OptionButton3.Value = False
OptionButton4.Value = False
OptionButton5.Value = False
OptionButton6.Value = False
OptionButton21.Value = False
OptionButton12.Value = False
OptionButton13.Value = False
OptionButton14.Value = False
OptionButton15.Value = False
OptionButton16.Value = False


End Sub
Private Sub Assembler_DropButtonClick()
Assembler.List = Array("Trung", "Jesus", "Khoi", "Josie", "Omi")
End Sub
Private Sub ClearALL_Click()

Call ConnectorCoverProductionForm_Initialize

End Sub

Private Sub CommandButton1_Click()
Shell ("Explorer \\PC148\Assembly Group\Traveler 
End Sub
Private Sub CommandButton2_Click()
Shell ("Explorer \\PC148\Assembly Group\Traveler               
End Sub

Private Sub CommandButton3_Click()
Shell ("Explorer \\PC148\Assembly Group\Traveler Templates\Videos\Edited\Mag 
End Sub

Private Sub CommandButton4_Click()
Shell ("Explorer \\PC148\Assembly Group\Traveler Templates\Videos\Edited\Mag 
End Sub

Private Sub Complete_Click()

Dim emptyRow As Long

Sheet1.Activate

emptyRow = WorksheetFunction.CountA(Range("C:C")) + 1

Cells(emptyRow, 3).Value = Serial_Number.Value
Cells(emptyRow, 4).Value = Order_Number.Value
Cells(emptyRow, 5).Value = TextBox1.Value
Cells(emptyRow, 6).Value = Revision.Value
Cells(emptyRow, 7).Value = Inspector.Value
Cells(emptyRow, 8).Value = Assembler.Value
Cells(emptyRow, 9).Value = Process_Code.Value
If OptionButton1.Value = True Then Cells(emptyRow, 10).Value =         OptionButton1.Caption
If OptionButton21.Value = True Then Cells(emptyRow, 10).Value = OptionButton21.Caption
If OptionButton2.Value = True Then Cells(emptyRow, 11).Value = OptionButton2.Caption
If OptionButton12.Value = True Then Cells(emptyRow, 11).Value = OptionButton12.Caption
If OptionButton3.Value = True Then Cells(emptyRow, 12).Value = OptionButton3.Caption
If OptionButton13.Value = True Then Cells(emptyRow, 12).Value = OptionButton13.Caption
If OptionButton4.Value = True Then Cells(emptyRow, 13).Value = OptionButton4.Caption
If OptionButton14.Value = True Then Cells(emptyRow, 13).Value = OptionButton14.Caption
If OptionButton5.Value = True Then Cells(emptyRow, 14).Value = OptionButton5.Caption
If OptionButton15.Value = True Then Cells(emptyRow, 14).Value = OptionButton15.Caption
If OptionButton6.Value = True Then Cells(emptyRow, 15).Value = OptionButton6.Caption
If OptionButton16.Value = True Then Cells(emptyRow, 15).Value = OptionButton16.Caption

End Sub

Private Sub Complete_Enter()

If Serial_Number.Value = "" Then MsgBox "Fill in Serial Number"
Exit Sub

If Order_Number.Value = "" Then MsgBox "Fill in Order Number"
Exit Sub

If TextBox1.Value = "" Then MsgBox "Fill in Date"
Exit Sub
If Revision.Value = "" Then MsgBox "Select the correct Revision"
Exit Sub
If Inspector.Value = "" Then MsgBox "Who was the inspector? If it was you,select 'SELF'"
Exit Sub
If Assembler.Value = "" Then MsgBox "Select Your Name as the Assembler"
Exit Sub
If Process_Code.Value = "" Then MsgBox "Select the correct Process Code"
Exit Sub
If OptionButton1.Value = False And OptionButton21.Value = False Then MsgBox "What is the Status of Step 1"
Exit Sub
If OptionButton2.Value = False And OptionButton12.Value = False Then MsgBox "What is the Status of Step 2"
Exit Sub
If OptionButton3.Value = False And OptionButton13.Value = False Then MsgBox "What is the Status of Step 3"
Exit Sub
If OptionButton4.Value = False And OptionButton14.Value = False Then MsgBox "What is the Status of Step 4"
Exit Sub
If OptionButton5.Value = False And OptionButton15.Value = False Then MsgBox "What is the Status of Step 5"
Exit Sub
If OptionButton6.Value = False And OptionButton16.Value = False Then MsgBox "What is the Status of Step 6"
Exit Sub


End Sub

Private Sub Inspector_DropButtonClick()
Inspector.List = Array("Tom", "Tre", "Omi", "Self")
End Sub

Private Sub Process_Code_DropButtonClick()
Process_Code.List = [index(12*(row(1:12)-1),)]
End Sub
Private Sub Revision_DropButtonClick()
Revision.List = [index(char(64+row(1:26)),)]
End Sub

我只是想让一个或多个级别太深?哦,我用JSON File检查了JSON文件。

任何帮助将不胜感激。谢谢!

2 个答案:

答案 0 :(得分:1)

一旦我删除了$ .appendTo('#somewhere')

,你的代码就适用于我

JS对我有用:

$.getJSON('https://sow.zhivco.com/assets/json/titles.json', {
  format: "JSON"
}).done(function(data) {
  $.each(data, function(i, optgroups) {
    $.appendTo("#somewhere");
    $.each(optgroups, function(groupName, options) {
     var $optgroup = $("<optgroup>", {
        label: groupName
      });
      $optgroup.appendTo('#somewhere');
      $.each(options, function(j, option) {
        var $option = $("<option>", {
          text: option.title,
          value: option.value
        });
        $option.appendTo($optgroup);
      });
    });
  });
});

Here is a working codepen.

我必须将您的JSON加载到codepen中的变量中,因为它托管的服务器不支持CORS issues

如果您遇到CORS问题,本网站上有很多可以帮助您解答的问题。

答案 1 :(得分:0)

仅将ajax发送到您的服务器

并在服务器上执行

    echo file_get_contents('https://sow.zhivco.com/assets/json/titles.json') 

或使用CURL

!!!跨域ajax是不行的!!!