《关键字选取三步走：第一步，选取内容》

1.textarea中的内容

选中之后，单击选中的蓝色中的鼠标位置， 则存储。

<script type="text/javascript">         var SWord;         var IDS;         function onReady() {             IDS = {                 txtAlarmID: '<%= txtAlarmID.ClientID %>',                 txtLogicType: '<%= txtLogicType.ClientID %>',                 ddlDeviceType: '<%= ddlDeviceType.ClientID %>',                 textSolution: '<%= textSolution.ClientID %>',                 txtLogicType: '<%= txtLogicType.ClientID %>'             };             SWord =             {                 text: '',                 Start: 0,                 End: 0             };             var textareaSo = document.getElementById(IDS.textSolution);             AttachEvent(textareaSo, "click", clickSelectedText, IDS.textSolution);             var textLogicType = document.getElementById(IDS.txtLogicType);             AttachEvent(textLogicType, "click", clickSelectedText, IDS.txtLogicType);         };         function AttachEvent(obj, eventName, handler, argsObject) {             var eventHandler = handler;             if (argsObject) {                 eventHandler =                function (e) {                     handler.call(this, argsObject);                  }             }               if (window.attachEvent)//IE                 obj.attachEvent("on" + eventName, eventHandler);             else//FF                 obj.addEventListener(eventName, eventHandler, false);         }         function clickSelectedText(Id) {             var o = document.getElementById(Id);             p1 = o.selectionStart; p2 = o.selectionEnd;             if (p1 || p1 == '0') {                 if (p1 != p2) {//选中                     SWord.Start = p1;                     SWord.End = p2;                     SWord.word = o.value.substring(p1, p2);                 }                 else //点击                 {                     if (p1 > SWord.Start && p2 < SWord.End)                     {                         document.getElementById("Div1").innerHTML = SWord.word;                     }                     SWord.Start =0;                     SWord.End = 0;                     SWord.word ='';                 }             }         }             </script>

2.下拉列表多选

mutiselect控件

引入

<link rel="stylesheet" type="text/css" href="/Scripts/mutiselect/multiselectSrc/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="/Scripts/mutiselect/assets/style.css" /> <link rel="stylesheet" type="text/css" href="/Scripts/mutiselect/assets/prettify.css" /> <link rel="stylesheet" type="text/css" href="/Scripts/mutiselect/ui/jquery-ui.css" /> <script type="text/javascript" src="/Scripts/mutiselect/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="/Scripts/mutiselect/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="/Scripts/mutiselect/assets/prettify.js"></script> <script type="text/javascript" src="/Scripts/mutiselect/multiselectSrc/jquery.multiselect.js"></script>

<script type="text/javascript">     jQuery(function () {         jQuery("select").multiselect({             noneSelectedText: "==请选择==",             checkAllText: "全选",             uncheckAllText: '全不选',             selectedList: 4         });     });     function showValues() {         var valuestr = jQuery("#sela").multiselect("MyValues");         alert(valuestr);     } </script>

对于jQuery MultiSelect JS文件修改：

1.定义变量： var multiValues = ""; 2.创建方法：     MyValues: function () {             return multiValues;         }, 3.update函数修改： //---这里        （修改）   // updates the button text. call refresh() to rebuild         update: function () {             var o = this.options;             var $inputs = this.inputs;             var $checked = $inputs.filter(':checked');             var numChecked = $checked.length;             var value;             if (numChecked === 0) {                 value = o.noneSelectedText;                 multiValues = '';//---这里             } else {                 if ($.isFunction(o.selectedText)) {                     value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());                 } else if (/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {                     value = $checked.map(function () { return $(this).next().html(); }).get().join(', ');                 } else {                     value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);                 }                 multiValues = $checked.map(function () { return $(this).val(); }).get().join(', ');//---这里             }             this._setButtonValue(value);             alert(multiValues);//---这里             return value;         },

3.选中之后的文字特效展示

引用

<%--关键字--%>  <link rel="stylesheet" type="text/css" href="/Scripts/KeyTab/KeyTab.css" /> <script type="text/javascript" src="/Scripts/KeyTab/tabControl.js"></script> <script type="text/javascript">     jQuery(function () {         jQuery("#tag").tabControl({ maxTabCount: 5, tabW: 80 }, "Jquery插件,Jquery资源,Jquery特效,,,");         jQuery("#getTab").click(function () {             var v = $("#tag").getTabVals();             alert(v.join(","));         });     }); </script>

<body onload="prettyPrint();">

 <div id="tag"></div>

总结：通过上面的使用。 各个功能都单独实现了。

        接下来就是把他们结合起来，还要统一对静态的关键字数组进行比对和插入删除。以及效果操作。

        下面分两步走：2.textarea选中与效果（静态的关键字数组）。

                            3.多选操作与效果（静态的关键字数组。

本人声明：沐海（http://my.oschina.net/mahaisong） 以上文章是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言！欢迎交流！