Javascript 获取select选项Django的值

我一直有一个问题，我如何才能得到我的选择选项的值，我一直在使用javascript设置选择选项的值，下面是我的代码，这是返回省值的数字，而不是文本。问题是如何将数字转换为文本，是否有专家分享解决方案

views.py

选择选项-我的参考

---

您需要在此处传递

name

value

newItem.value

，因为在提交选项时，

value

属性被传递到后端。更改后，仍然需要

id

填充下一个选择框，以便可以创建值为

id

的自定义属性，然后将其传递给函数

演示代码：

let数据=[{
“id”：1，
“名称”：“美国”，
“父ID”：0
},
{
“id”：2，
“名称”：“日本”，
“父ID”：0
},
{
“id”：3，
“名称”：“欧洲”，
“父ID”：0
},
{
“id”：4，
“名称”：“加利福尼亚”，
“家长ID”：1
},
{
“id”：5，
“名称”：“俄克拉荷马州”，
“家长ID”：1
},
{
“id”：6，
“名称”：“亚利桑那州”，
“家长ID”：1
},
{
“id”：7，
“名称”：“康德”，
“家长ID”：2
},
{
“id”：8，
“名称”：“关西”，
“家长ID”：2
},
{
“id”：9，
“姓名”：“丘悟空”，
“家长ID”：2
},
{
“id”：10，
“名称”：“法国”，
“家长ID”：3
},
{
“id”：11，
“名称”：“德国”，
“家长ID”：3
},
{
“id”：12，
“姓名”：“西班牙”，
“家长ID”：3
},
{
“id”：13，
“姓名”：“萨克拉门托”，
“家长ID”：4
},
{
“id”：14，
“名称”：“洛杉矶”，
“家长ID”：4
},
{
“id”：15，
“名称”：“圣地亚哥”，
“家长ID”：4
},
{
“id”：16，
“名称”：“塔尔萨”，
“家长ID”：5
},
{
“id”：17，
“名称”：“俄克拉荷马城”，
“家长ID”：5
},
{
“id”：18，
“姓名”：“劳顿”，
“家长ID”：5
},
{
“id”：19，
“名字”：“凤凰”，
“家长ID”：6
},
{
“id”：20，
“姓名”：“旗杆”，
“家长ID”：6
},
{
“id”：21，
“名称”：“图森”，
“家长ID”：6
},
{
“id”：21，
“名称”：“东京”，
“家长ID”：7
},
{
“id”：22，
“名称”：“千叶”，
“家长ID”：7
},
{
“id”：23，
“名称”：“Tochigi”，
“家长ID”：7
},
{
“id”：24，
“名称”：“京都”，
“家长ID”：8
},
{
“id”：25，
“名称”：“大阪”，
“家长ID”：8
},
{
“id”：26，
“姓名”：“奈良”，
“家长ID”：8
},
{
“id”：27，
“姓名”：“托托里”，
“家长ID”：9
},
{
“id”：28，
“名称”：“广岛”，
“家长ID”：9
},
{
“id”：29，
“名称”：“冈山”，
“家长ID”：9
},
{
“id”：30，
“姓名”：“坎珀”，
“家长ID”：10
},
{
“id”：31，
“名称”：“图卢兹”，
“家长ID”：10
},
{
“id”：32，
“姓名”：“南希”，
“家长ID”：10
},
{
“id”：33，
“姓名”：“杜塞尔多夫”，
“家长ID”：11
},
{
“id”：34，
“名称”：“莱比锡”，
“家长ID”：11
},
{
“id”：35，
“名称”：“蒙辰”，
“家长ID”：11
},
{
“id”：36，
“名称”：“巴塞罗那”，
“家长ID”：12
},
{
“id”：37，
“姓名”：“塞维利亚”，
“家长ID”：12
},
{
“id”：38，
“名称”：“格尔尼卡”，
“家长ID”：12
}
]
函数populateList（列表，pid）{
设l=document.getElementById（列表）；
l、 innerHTML=“”；
让topItem=document.createElement（“选项”）；
topItem.value=0；
topItem.text=“--选择--”；
l、 附加子项（topItem）；
让items=data.filter（item=>item.parentid==pid）；
items.forEach（功能（项目）{
让newItem=document.createElement（“选项”）；
newItem.value=item.name；//在value中同时给出name值
newItem.text=item.name；
var data_id=document.createAttribute（“数据id”）//crete自定义属性
data\u id.value=item.id//set id value在那里
newItem.setAttributeNode（data_id）；//将其传递给您的选项
l、 追加子项（新项）；
})
}
函数更新列表（selList，thisList）{
如果（thisList.value！=0）{
populateList（selList，编号（thisList.options[thisList.selectedIndex].getAttribute（'data-id'））；//获取selectedoption数据id值
}否则{
设s=document.getElementById（selList）；
s、 数值=0；
触发事件（“变更”）；
设为s.cloneNode（假）；
设p=s.parentNode；
p、 替换儿童（s）；
}
}
功能触发器事件（e，触发器）{
if（（e[触发器]| | false）&&typeof e[触发器]=“函数”）{
e[触发]（e）；
}
}
函数loadList1（）{
大众列表（“列表1”，0）；
}
window.onload=loadList1

>
您需要将
名称
传递到后端，而不是
id
？@Swati谢谢您的回答，是的，我想传递名称而不是id尝试在所有的options@TajinderSingh你是说在我的javascript中吗？是的，我想你想得到
name
字段的内容，因此，您必须使用与
名称
字段相同的内容填充
值
字段的内容。对吗？
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>

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;