首页 > Web开发 > 详细

关于jquery操作多个option值

时间:2021-04-10 00:06:27      阅读:22      评论:0      收藏:0      [点我收藏+]

记录下最近项目的一个需求,①②这两个都是一个select下面的option,且select的id=component_input,当点击①②的时候需要将1,2,3,4,5,6这些页面输入的数据显示出来,当我点击新增时,清空123456上面显示的数据,此时可以输入新数据;当我输入完成后点击确定,此时将数据保存到页面上,同时将新增的①置于选中状态,而不是传到后台数据库,最后点击保存时候,将①②上输入的数据保存到数据库中。

技术分享图片

 

 

 

最后采用了将页面上所有的数据全部拼接成字符串放到了option的value值中,在获取option的value值后进行切割

1 //返回输入参数到页面上,拼接用的^符号隔开
2 $("#component_input").empty()
3     for (var i = 0; i < data.input.length; i++) {
4 $("#component_input").append(‘<option value="‘ + data.input[i]["code"]  +"^" + data.input[i]["name"] +"^"+data.input[i]["type"]+ "^" + data.input[i]["source"] + "^"+data.input[i]["remark"]+"^"+ data.input[i]["sort"]+"^"+data.input[i]["value"]+‘">‘ + data.input[i]["name"] + ‘</option>‘)
5 }

在获取option的value值后进行切割

//设置输入参数是不是新的
if
($("#component_input_isnew").val() == "1") { var array = new Array();
   //遍历seleect的option的value值 $(
"#component_input option").each(function () { var val = $(this).val(); if (val != "") { array.push(val); } })
  //所有的数据拼成了字符串,在以^号切割开
var code_array = new Array(); for (var i = 0; i < array.length; i++) { var val_splitarray = array[i].split("^") code_array.push(val_splitarray[0]) }
  //这里写了一个成员判断函数,判断页面新增的数据是不是已经添加过了
var judge_result = judgeMember(code_array, $("#component_input_code").val()) if (judge_result == "exist") { alert("已存在参数名") return } else { var code = $("#component_input_code").val(); var name = $("#component_input_name").val(); var type = $("#component_input_type").val(); var source = $("#component_input_source").val(); var remark = $("#component_input_remark").val(); var sort = $("#component_input_sort").val(); var value = $("#component_input_value").val(); $("#component_input").append(‘<option value="‘ + code + "^" + name + "^" + type + "^" + source + "^" + remark + "^" + sort + "^" + value + ‘">‘ + name + ‘</option>‘);
     //根据当前选中的option,设置为选中状态 $(
"#component_input").find("option[value=‘" + code + "^" + name + "^" + type + "^" + source + "^" + remark + "^" + sort + "^" + value + "‘]").attr("selected", true); $("#component_input_code").prop("readonly", value = true) $("#component_input_isnew").val("0") } } else {
   //获取当前选中的option的value值
var selectval = $("#component_input option:selected").val(); var spilt_params = selectval.split("^") if ($("#component_input_code").val() == spilt_params[0]) { var code = $("#component_input_code").val(); var name = $("#component_input_name").val(); var type = $("#component_input_type").val(); var source = $("#component_input_source").val(); var remark = $("#component_input_remark").val(); var sort = $("#component_input_sort").val(); var value = $("#component_input_value").val();
     //将当前新增的值设置为选中状态 $(
"#component_input option:selected").val(code + "^" + name + "^" + type + "^" + source + "^" + remark + "^" + sort + "^" + value) $("#component_input option:selected").text(name) $("#component_input").val() } } alert("修改成功,点击保存后生效。")

当点击①或者②时展现数据

$("#component_input").click(function () {
    var selectval = $("#component_input option:selected").val();
  //防止用户不点①或者②,点击了空白处的处理
if (selectval) { $("#component_input_del").show(); $("#component_input_isnew").val() == "0"; $("#component_input_code").prop("readonly", true); $("#component_input_name").prop("readonly", false); $("#component_input_type").prop("disabled", false); $("#component_input_source").prop("disabled", false); $("#component_input_sort").prop("readonly", false); $("#component_input_remark").prop("readonly", false); $("#component_input_value").prop("readonly", false); $("#component_input_add").show() $("#component_input_save").show() var spilt_params = selectval.split("^") if (spilt_params[0] == "null") { $("#component_input_code").val("") } else { $("#component_input_code").val(spilt_params[0]) } if (spilt_params[1] == "null") { $("#component_input_name").val("") } else { $("#component_input_name").val(spilt_params[1]) } if (spilt_params[2] == "null") { $("#component_input_type").val("") } else { $("#component_input_type").val(spilt_params[2]) } if (spilt_params[3] == "null") { $("#component_input_source").val("") } else { $("#component_input_source").val(spilt_params[3]) } if (spilt_params[4] == "null") { $("#component_input_remark").val("") } else { $("#component_input_remark").val(spilt_params[4]) } if (spilt_params[5] == "null") { $("#component_input_sort").val("") } else { $("#component_input_sort").val(spilt_params[5]) } if (spilt_params[6] == "null") { $("#component_input_value").val("") } else { $("#component_input_value").val(spilt_params[6]) } } })

通过ajax将点击保存的数据传到django后台,

$(‘#save‘).click(function (data) {
    var inputarray = new Array();
    $("#component_input option").each(function () {
        var val = $(this).val();
        if (val != "") {
            inputarray.push(val);
        }
    })
  //在将多个option值以##拼接
var input_arr = inputarray.join("##") $.ajax({ type: "POST", dataType: "JSON", url: "../component_save/", data: { "input_arr": input_arr, }, success: function (data) { } }); });

后台django处理下带格式的字符串

# 拆解input的option的value信息
def split_input_option_value(arr_string):
    list_double = []
    list_params = []
    a_list = arr_string.split("##")
    for i in a_list:
        i_list = i.split("^")
        list_double.append(i_list)
    for i in list_double:
        list_params.append({"code": i[0], "name": i[1], "type": i[2], "source": i[3], "remark": i[4], "sort": i[5], "value": i[6]})
    return list_params

最后保存到数据库中

ps:第一次写博客。怕自己遗忘了

 

关于jquery操作多个option值

原文:https://www.cnblogs.com/luchenhao/p/14638558.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!