3


我希望用户能够选择一个选项，并且能够在单击“重命名”按钮时重命名它。

我正在尝试通过input type = "text"在 selected中嵌套一个option. 但是，中的onblur事件input不起作用......

似乎select不允许在里面嵌套 HTML 元素option，但它的功能是理想的......我可以用什么结构来实现这样的东西，一个无序列表？

这是HTML：

<select id = "asdf" size = "2">
    <option>asdf</option>
    <option>qwerty</option>
</select>

<input type = "button" value = "rename" onclick = "rename();" />


...这里是 javascript/jQuery：

function rename() {
    if ($("#asdf").length > 0) {
        var selectedText = $("#asdf").find(":selected").text();
        var selectedIndex = $("#asdf").find(":selected").index();
        var options = document.getElementById("asdf").options;

        options[selectedIndex].innerHTML =
           "<input type = 'text' id = 'field' onblur = 'setField(this.value);'" +
           "value = '" + selectedText + "' />";

        function setField(newName) {
            options[selectedIndex].innerHTML = newName;
        }
    }
}
4

3 回答 3

1

您可以遍历选项：

for(var i = 0, l = select.options.length; i < l; i++) 
 {
    var option = select.options[i];
    var obj = {};
    if(option.value == "...")
    {
        option.innerHTML = "...";
        obj[option.value] = option.innerHTML;
    }
 }
 return obj;

我会把它放在一个函数中并传递一个你搜索的值和替换，或者一个地图。就像是：

setOptionText(select, 'value', 'text');
// or
setOptionText(select, {'value': 'text', 'value': 'text', ...});

参考：HTMLSelectElement

于 2013-07-15T05:33:01.277 回答
0


好的，我明白了——
    事实证明我能够用一个ul结构和一些相当讨厌的 jQuery 来实现它。

CSS：

    #list {
        list-style-type: none;
    }
    .highlighted {
        background-color: #FFFF00;
    }


HTML：

<ul id = "list">
    <li>asdf</li>
    <li>qwerty</li>
<ul>

<input type = "button" value = "rename item" onclick = "renameSearch();" />


jQuery/javascript：

$("#list").on("click focus", "li", function() {
    $(this)
        .addClass("highlighted")
        .siblings().removeClass("highlighted");
});

function renameSearch() {
    $("#list li").each(function(index) {
        if ($(this).hasClass("highlighted")) {
            //alert(index + ": " + $(this).text());
            $(this).html("<input type = 'text' id = 'renameField' value = '" + $(this).text() + "' />");

            $("#renameField").focus();
            $("#renameField").select();

            $("#list li").on("focusout", "#renameField", function() {
                //alert($(this).val());
                $(this).parent().text($(this).val());
            });
        }
    });
} // end of function


jsFiddle——  http://jsfiddle.net/icampbell2/59YDF/

于 2013-07-16T00:05:41.533 回答
0

我希望用户能够选择一个选项，并且能够在单击“重命名”按钮时重命名它。

找不到合适的解决方案，我写了以下内容，我认为效果很好，并且完全按照上面提到的方式进行。与以前的答案相比，它似乎有点冗长，但它不使用任何库。

它使用一个<input type=text>来编辑给定的文本<option>。它的<input>大小和位置位于选择的顶部，并且在实际上不处于“编辑”模式时（当输入没有焦点时）隐藏。

//Javascript

var D = document;
function E(id) { return D.getElementById(id); }


var WIDGET_NAMES = [0,'Orange','Loud','Steel','Sky','Wheat','','Almond','Oak','Water','Vague'];

var $select_widget  = E('ESL_select_widget');
var $widget_name    = E('ESL_widget_name');
var $rename_widget  = E('ESL_rename_widget');
var $delete_widget  = E('ESL_delete_widget');


function Pad10(number) {
	if ((number * 1) < 10) { var pad = "&nbsp; "; } else { var pad = ""; }
	return pad + number;
}//end Pad10()


$select_widget.addEventListener("change", function() {
	$widget_name.value = WIDGET_NAMES[$select_widget.value];
});


$select_widget.addEventListener("keypress", function(event) {
	//Yes, both blur() & focus() are needed...
	if(event.keyCode == 13) {
		D.activeElement.blur();
		$widget_name.style['visibility'] = "visible";
		$widget_name.focus();
	}
});


$widget_name.addEventListener("keypress", function(event) {
	//Yes, both blur() & focus() are needed...
	if(event.keyCode == 13) {
		D.activeElement.blur();
		$select_widget.focus();
	}
});


$widget_name.addEventListener("blur", function(event) {
	$widget_name.style['visibility'] = "hidden";
});


$widget_name.addEventListener("change", function() {
	this.value   = this.value.trim();
	var current_widget = $select_widget.value;
	
	//options count from 0, people count from 1.
	var option = $select_widget.options[current_widget-1];
	option.innerHTML = Pad10(current_widget) + ":: " + $widget_name.value;
	WIDGET_NAMES[current_widget] = $widget_name.value;
});


$rename_widget.addEventListener("click", function() {
	$widget_name.style['visibility'] = 'visible';
	$widget_name.focus();
});


$delete_widget.addEventListener("click", function() {
	var current_widget = $select_widget.value;
	$select_widget.options[current_widget-1].innerHTML = Pad10(current_widget);
	WIDGET_NAMES[current_widget] = '';
	$widget_name.value = '';
});


for (var x = 1; x <= 10; x++) {
	$select_widget.options[x-1].value = x;
	if (WIDGET_NAMES[x] == '') { var mark = ''; } else { var mark = ":: "; }
	$select_widget.options[x-1].innerHTML = Pad10(x) + mark + WIDGET_NAMES[x];
}


$widget_name.value = WIDGET_NAMES[$select_widget.value]

$select_widget.focus();
/* CSS */

* { margin: 0; padding: 0; box-sizing: border-box; }

input.ESL:focus, select.ESL:focus, button.ESL:focus { box-shadow: 0 0 3pt 1pt #006060 }

select.ESL:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }

#ESL_container {
	display: inline-block;
	padding: .5rem;
	border : solid 1px black;
}

#ESL_rename_container {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0;
	border: 0;
}

#ESL_select_widget {
	width  : 12rem;
	margin : 0 0 .5rem 0;
	padding: 0;
	font-size  : 1rem;
	font-family: arial;
}

#ESL_select_widget option { text-align: left; padding-left: .2rem;}

#ESL_widget_name {
	position: absolute;
	top     : 1px;
	left    : 2.1rem;
	margin  : 0;
	padding : 1px 0 0 0;
	width   : 9.9rem;
	height  : 1.3rem;
	border     : solid 1px transparent;
	text-align : left;
	font-size  : 1rem;
	font-family: arial;  /** set to same as select_widget. **/
	visibility : hidden; /** visible during rename only    **/
}
<!-- HTML -->

<div id=ESL_container>
	<div id=ESL_rename_container>
		<select id=ESL_select_widget class=ESL>
			<option value=1 ></option>
			<option value=2 ></option>
			<option value=3 ></option>
			<option value=4 ></option>
			<option value=5 ></option>
			<option value=6 ></option>
			<option value=7 ></option>
			<option value=8 ></option>
			<option value=9 ></option>
			<option value=10></option>
		</select><br>
		<input id=ESL_widget_name type=text class=ESL value="" tabindex=-1>
	</div><br>
	
	<button type=button id=ESL_rename_widget class=ESL>Rename Widget</button>
	<button type=button id=ESL_delete_widget class=ESL>Delete Widget</button>
</div>

于 2018-06-30T05:13:18.410 回答