获取Django中选择选项的值

Question

我一直在遇到一个问题，如何获取我的选择选项的值。我一直在使用JavaScript来设置选择选项的值，以下是我的代码，它返回省份的数字而不是文本。问题是如何将数字转换为文本，是否有任何专家可以分享解决方案。

views.py

def sample_data(request):
    if request.method=='POST':
        province = request.POST['list1']
        print(province) #return ex. 2 depend on select value
        return render (request,'sample.html')

选择选项 - 我的参考 链接

<select id="list1" name ="list1" onchange="updateList('list2', this);"></select>
<select id="list2" name ="list2" onchange="updateList('list3', this);"></select>>
<select id="list3" name ="list3"></select>

JavaScript

let data = [{"id":1,"name":"USA","parentid":0},
{"id":2,"name":"Japan","parentid":0},
{"id":3,"name":"Europe","parentid":0},
{"id":4,"name":"California","parentid":1},
{"id":5,"name":"Oklahoma","parentid":1},
{"id":6,"name":"Arizona","parentid":1},
{"id":7,"name":"Kantô","parentid":2},
{"id":8,"name":"Kansai","parentid":2},
{"id":9,"name":"Chügoku","parentid":2},
{"id":10,"name":"France","parentid":3},
{"id":11,"name":"Deutschland","parentid":3},
{"id":12,"name":"Espana","parentid":3},
{"id":13,"name":"Sacramento","parentid":4},
{"id":14,"name":"Los Angeles","parentid":4},
{"id":15,"name":"San Diego","parentid":4},
{"id":16,"name":"Tulsa","parentid":5},
{"id":17,"name":"Oklahoma City","parentid":5},
{"id":18,"name":"Lawton","parentid":5},
{"id":19,"name":"Phoenix","parentid":6},
{"id":20,"name":"Flagstaff","parentid":6},
{"id":21,"name":"Tucson","parentid":6},
{"id":21,"name":"Tokyo","parentid":7},
{"id":22,"name":"Chiba","parentid":7},
{"id":23,"name":"Tochigi","parentid":7},
{"id":24,"name":"Kyoto","parentid":8},
{"id":25,"name":"Osaka","parentid":8},
{"id":26,"name":"Nara","parentid":8},
{"id":27,"name":"Tottori","parentid":9},
{"id":28,"name":"Hirochima","parentid":9},
{"id":29,"name":"Okayama","parentid":9},
{"id":30,"name":"Quimper","parentid":10},
{"id":31,"name":"Toulouse","parentid":10},
{"id":32,"name":"Nancy","parentid":10},
{"id":33,"name":"Dusseldorf","parentid":11},
{"id":34,"name":"Leipzig","parentid":11},
{"id":35,"name":"Munchen","parentid":11},
{"id":36,"name":"Barcelona","parentid":12},
{"id":37,"name":"Sevilla","parentid":12},
{"id":38,"name":"Guernica","parentid":12}]

function populateList(list, pid) {
  let l = document.getElementById(list);
  l.innerHTML = "";
  let topItem = document.createElement("option");
  topItem.value = 0;
  topItem.text = "--Select--";
  l.appendChild(topItem); 
  let items = data.filter(item => item.parentid == pid);
  items.forEach(function(item){
    let newItem = document.createElement("option");
    newItem.value = item.id;
    newItem.text = item.name;
    l.appendChild(newItem);
  })
}

function updateList(selList, thisList) {
  if (thisList.value != 0) {
    populateList(selList, Number(thisList.value));
  } else {
    let s = document.getElementById(selList);
    s.value = 0;
    triggerEvent(s, "onchange");
    let sCopy = s.cloneNode(false);
    let p = s.parentNode;
    p.replaceChild(sCopy, s);
  }
}
function triggerEvent(e, trigger)
{
    if ((e[trigger] || false) && typeof e[trigger] == 'function')
    {
        e[trigger](e);
    }
}
 

function loadList1() {
  populateList("list1", 0);
}

window.onload = loadList1;

- Shainnah Jane

---

你的意思是向后端传递 name 而不是 id 吗？ - Swati

@Swati，感谢您的回复。是的，我想传递名称而不是ID。 - Shainnah Jane

尝试为所有选项添加一个“value”字段。 - Tajinder Singh

@Tajinder Singh 你是指我的 JavaScript 吗？ - Shainnah Jane

是的，我猜你想获取“name”字段的内容，所以你需要用与“name”字段相同的内容填充“value”字段。这样正确吗？ - Tajinder Singh

@Tajinder Singh 是的，name 字段在 JavaScript 中，但我该如何获取 name 的值呢？ - Shainnah Jane

Answer 1

在此处传递name值 newItem.value，因为在提交时选项的value属性会被传递到后端。然后在更改后，您仍然需要id来填充下一个选择框，因此您可以创建具有值为id的自定义属性，然后将其传递给您的函数。

演示代码：

let data = [{
    "id": 1,
    "name": "USA",
    "parentid": 0
  },
  {
    "id": 2,
    "name": "Japan",
    "parentid": 0
  },
  {
    "id": 3,
    "name": "Europe",
    "parentid": 0
  },
  {
    "id": 4,
    "name": "California",
    "parentid": 1
  },
  {
    "id": 5,
    "name": "Oklahoma",
    "parentid": 1
  },
  {
    "id": 6,
    "name": "Arizona",
    "parentid": 1
  },
  {
    "id": 7,
    "name": "Kantô",
    "parentid": 2
  },
  {
    "id": 8,
    "name": "Kansai",
    "parentid": 2
  },
  {
    "id": 9,
    "name": "Chügoku",
    "parentid": 2
  },
  {
    "id": 10,
    "name": "France",
    "parentid": 3
  },
  {
    "id": 11,
    "name": "Deutschland",
    "parentid": 3
  },
  {
    "id": 12,
    "name": "Espana",
    "parentid": 3
  },
  {
    "id": 13,
    "name": "Sacramento",
    "parentid": 4
  },
  {
    "id": 14,
    "name": "Los Angeles",
    "parentid": 4
  },
  {
    "id": 15,
    "name": "San Diego",
    "parentid": 4
  },
  {
    "id": 16,
    "name": "Tulsa",
    "parentid": 5
  },
  {
    "id": 17,
    "name": "Oklahoma City",
    "parentid": 5
  },
  {
    "id": 18,
    "name": "Lawton",
    "parentid": 5
  },
  {
    "id": 19,
    "name": "Phoenix",
    "parentid": 6
  },
  {
    "id": 20,
    "name": "Flagstaff",
    "parentid": 6
  },
  {
    "id": 21,
    "name": "Tucson",
    "parentid": 6
  },
  {
    "id": 21,
    "name": "Tokyo",
    "parentid": 7
  },
  {
    "id": 22,
    "name": "Chiba",
    "parentid": 7
  },
  {
    "id": 23,
    "name": "Tochigi",
    "parentid": 7
  },
  {
    "id": 24,
    "name": "Kyoto",
    "parentid": 8
  },
  {
    "id": 25,
    "name": "Osaka",
    "parentid": 8
  },
  {
    "id": 26,
    "name": "Nara",
    "parentid": 8
  },
  {
    "id": 27,
    "name": "Tottori",
    "parentid": 9
  },
  {
    "id": 28,
    "name": "Hirochima",
    "parentid": 9
  },
  {
    "id": 29,
    "name": "Okayama",
    "parentid": 9
  },
  {
    "id": 30,
    "name": "Quimper",
    "parentid": 10
  },
  {
    "id": 31,
    "name": "Toulouse",
    "parentid": 10
  },
  {
    "id": 32,
    "name": "Nancy",
    "parentid": 10
  },
  {
    "id": 33,
    "name": "Dusseldorf",
    "parentid": 11
  },
  {
    "id": 34,
    "name": "Leipzig",
    "parentid": 11
  },
  {
    "id": 35,
    "name": "Munchen",
    "parentid": 11
  },
  {
    "id": 36,
    "name": "Barcelona",
    "parentid": 12
  },
  {
    "id": 37,
    "name": "Sevilla",
    "parentid": 12
  },
  {
    "id": 38,
    "name": "Guernica",
    "parentid": 12
  }
]

function populateList(list, pid) {

  let l = document.getElementById(list);
  l.innerHTML = "";
  let topItem = document.createElement("option");
  topItem.value = 0;
  topItem.text = "--Select--";
  l.appendChild(topItem);
  let items = data.filter(item => item.parentid == pid);
  items.forEach(function(item) {
    let newItem = document.createElement("option");
    newItem.value = item.name;//give name value as well in value 
    newItem.text = item.name;
    var data_id = document.createAttribute("data-id")//crete custom attribute
    data_id.value = item.id//set id value there
    newItem.setAttributeNode(data_id);//pass same to your option
    l.appendChild(newItem);
  })
}

function updateList(selList, thisList) {
  if (thisList.value != 0) {
    populateList(selList, Number(thisList.options[thisList.selectedIndex].getAttribute('data-id')));//get selectedoption data-id value
  } else {
    let s = document.getElementById(selList);
    s.value = 0;

    triggerEvent(s, "onchange");
    let sCopy = s.cloneNode(false);
    let p = s.parentNode;
    p.replaceChild(sCopy, s);
  }
}

function triggerEvent(e, trigger) {
  if ((e[trigger] || false) && typeof e[trigger] == 'function') {
    e[trigger](e);
  }
}


function loadList1() {
  populateList("list1", 0);
}

window.onload = loadList1;

<select id="list1" name="list1" onchange="updateList('list2', this);"></select>
<select id="list2" name="list2" onchange="updateList('list3', this);"></select>>
<select id="list3" name="list3"></select>

- Swati