Question

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

我是通过在所选input type = "text"内嵌套option来尝试此操作的。但是，onblur中的input事件无效...

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

<小时/> 这是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;
        }
    }
}

Answer 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

Answer 2

好，我知道了 -
事实证明我能够用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/

Answer 3

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

无法找到合适的解决方案，我写了以下内容，我认为它很好用，并且完全如上所述。与以前的答案相比，它似乎有点冗长，但是它不使用任何库。

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

//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>

如何在HTML选择中实现重命名选项？

3 个答案: