Question

对于某些人来说，这可能是一个简单的问题，但我遗漏了一些东西，并希望得到一些帮助：

我在SELECT字段中具有所需的正确功能：

选择一个选项，或在选择框中键入一个新选项
将其选为SELECTED值
导致值= SELECTED

问题： javascript使用所选值

所有

有没有办法将javascript的功能仅限于该字段或更好地限制到表单中的某些字段，以便我可以在其他字段上重复使用？

非常感谢先进！

代码如下：

<html>
<!-- adapted from original javascript code source:        http://ughzoid.wordpress.com/2013/01/19/jquery-html-select-element-with-editable-input-field/  -->

<head>
<STYLE type="text/css">
select{position:absolute; width:160px;height:23px; left:10; top:30; border:0;}
input{ position:absolute; width:140px;height:17px; left:10; top:30;}
p{position: relative; margin-top:50px;}

</STYLE>

        <meta charset="utf-8">
        <title>Special Select Handling...</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(window).load(function(){
    $('select').change(function(){ 
        modify();
    })

    function modify(){
        $('input').val($('select').val());
        output();
    }

    function output(){
        $('p').text('value: ' + $('input').val());
    }

    $('input').on('click', function(){
        $(this).select()
    }).on('blur', function(){
        output();
    })

    modify();
    })

    // Plugin
    $.fn.iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease = function() {
    // Original source: http://css-tricks.com/absolutely-position-element-within-a-table-cell/
        var $el;
        return this.each(function() {
            $el = $(this);
            var newDiv = $("<div />", {
                "class": "innerWrapper",
                "css"  : {
                    "height"  : $el.height(),
                    "width"   : "100%",
                    "position": "relative"
                }
            });
            $el.wrapInner(newDiv);    
        });
    };

    // DOM Ready
    $(function() {
        // Usage
        $("th, td").iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease();
    });

</script>

</head>
<body>
<h2>Special Select Handling ... </h2>

<div id="cell0">
<table border="1">
 <tr> 
    <td width="170px">1/2 <br /></td>
    <td width="170px">1/3 <br /></td>
    <td width="170px">1/4 <br /></td>
    <td width="170px">1/5 <br /></td>
  </tr>

 <tr>
    <td>Standard Text Field:<br /> <br /></td>
    <td> <input type="text" name="strategy" id="strategy" value="text field 1" /><br /></td>
    <td>2/4 </td>
    <td>2/5 </td>
  </tr>
  <tr>

    <td>Special Field:<br /></td>
    <td  style="width:160px; height:30px">
        <div id="cell1">
        <select>
            <option selected="selected" value="100">100</option>
            <option value="200">200</option>
            <option value="300">300</option>
            <option value="400">400</option>
        </select>
        <input type="text" name="" value="">    
        </div>
        <br />
    </td>
    <td><p>value:</p>       <script src="js/jquery.calculator.js"></script>    </td>
    <td>this is the correct functionality:  Either select an option, or type a new one on the select box and selects it as the SELECTED value  <br><Br>
    the issue is that this javascrip fills *all* other INPUT fields the the form  with the selected value </td>


   <tr>
    <td>Another Text Field:<br />asd </td>
    <td><input type="text" name="text2" id="text2" value="" /><br /></td>
    <td> </td>
    <td> </td>

  </tr>
   <tr> 

    <td width="170px">5/2 <br /></td>
    <td width="170px">5/3 <br /></td>
    <td width="170px">5/4 <br /></td>
    <td width="170px">5/5 <br /></td>
  </tr>
  </table>
  </div>

</body>
</html>

Answer 1

$('input')选择器会影响页面上的所有input元素。要限制其范围，您可以做很多事情，但通常会为输入元素分配id：

<input type='text' id='myinput' ... >

然后在选择器中引用此id：

$('input#myinput')

研究CSS Selectors是什么。

将JavaScript功能限制为One Field

1 个答案: