我有一个以下的HTML代码。
$(".category-tab").on('click', function() {
var category_id = $(this).data("id");
$("#search-form").removeAttr("data-categoryid");
$("#search-form").attr("data-categoryid", category_id);
});
$("#search-form").submit(function(e) {
e.preventDefault();
var category_id = $(this).data('categoryid');
var country_id = $('#country').val();
var state_id = $('#state').val();
var search_text = $('#search-text').val();
console.log(category_id);
console.log(country_id);
console.log(state_id);
console.log(search_text);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link category-tab active " data-id="1" data-toggle="tab" href="#montesorri" role="tab">Montessori</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="2" data-toggle="tab" href="#school" role="tab">School</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="3" data-toggle="tab" href="#college" role="tab">College</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="4" data-toggle="tab" href="#institute" role="tab">Institute</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="5" data-toggle="tab" href="#hostel" role="tab">Hostel</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="6" data-toggle="tab" href="#University" role="tab">University</a>
</li>
</ul>
<div class=" page-description" style="padding-bottom: 10px;">
<form id="search-form" data-categoryid="4">
<div class="form-row">
<div class="col-md-2">
<select name="country_id" id="country" class="form-control select2" style="width:100%;" required="">
<option value="" selected="" disabled="">-- Select Country --</option>
<option value="1" data-id="1">Afghanistan</option>
<option value="2" data-id="2">Albania</option>
<option value="3" data-id="3">Algeria</option>
<option value="4" data-id="4">American Samoa</option>
<option value="5" data-id="5">Andorra</option>
<option value="6" data-id="6">Angola</option>
<option value="7" data-id="7">Anguilla</option>
<option value="8" data-id="8">Antarctica</option>
<option value="9" data-id="9">Antigua And Barbuda</option>
<option value="10" data-id="10">Argentina</option>
<option value="11" data-id="11">Armenia</option>
<option value="12" data-id="12">Aruba</option>
<option value="13" data-id="13">Australia</option>
<option value="14" data-id="14">Austria</option>
<option value="15" data-id="15">Azerbaijan</option>
<option value="16" data-id="16">Bahamas The</option>
<option value="17" data-id="17">Bahrain</option>
<option value="18" data-id="18">Bangladesh</option>
<option value="19" data-id="19">Barbados</option>
<option value="20" data-id="20">Belarus</option>
<option value="21" data-id="21">Belgium</option>
<option value="22" data-id="22">Belize</option>
<option value="23" data-id="23">Benin</option>
<option value="24" data-id="24">Bermuda</option>
<option value="25" data-id="25">Bhutan</option>
<option value="26" data-id="26">Bolivia</option>
<option value="27" data-id="27">Bosnia and Herzegovina</option>
<option value="28" data-id="28">Botswana</option>
<option value="29" data-id="29">Bouvet Island</option>
<option value="30" data-id="30">Brazil</option>
<option value="31" data-id="31">British Indian Ocean Territory</option>
<option value="32" data-id="32">Brunei</option>
<option value="33" data-id="33">Bulgaria</option>
<option value="34" data-id="34">Burkina Faso</option>
<option value="35" data-id="35">Burundi</option>
<option value="36" data-id="36">Cambodia</option>
<option value="37" data-id="37">Cameroon</option>
<option value="38" data-id="38">Canada</option>
<option value="39" data-id="39">Cape Verde</option>
<option value="40" data-id="40">Cayman Islands</option>
<option value="41" data-id="41">Central African Republic</option>
<option value="42" data-id="42">Chad</option>
<option value="43" data-id="43">Chile</option>
<option value="44" data-id="44">China</option>
<option value="45" data-id="45">Christmas Island</option>
<option value="46" data-id="46">Cocos (Keeling) Islands</option>
<option value="47" data-id="47">Colombia</option>
<option value="48" data-id="48">Comoros</option>
<option value="49" data-id="49">Congo</option>
<option value="50" data-id="50">Congo The Democratic Republic Of The</option>
<option value="51" data-id="51">Cook Islands</option>
<option value="52" data-id="52">Costa Rica</option>
<option value="53" data-id="53">Cote D Ivoire (Ivory Coast)</option>
<option value="54" data-id="54">Croatia (Hrvatska)</option>
<option value="55" data-id="55">Cuba</option>
<option value="56" data-id="56">Cyprus</option>
<option value="57" data-id="57">Czech Republic</option>
<option value="58" data-id="58">Denmark</option>
<option value="59" data-id="59">Djibouti</option>
<option value="60" data-id="60">Dominica</option>
<option value="61" data-id="61">Dominican Republic</option>
<option value="62" data-id="62">East Timor</option>
<option value="63" data-id="63">Ecuador</option>
<option value="64" data-id="64">Egypt</option>
<option value="65" data-id="65">El Salvador</option>
<option value="66" data-id="66">Equatorial Guinea</option>
<option value="67" data-id="67">Eritrea</option>
<option value="68" data-id="68">Estonia</option>
<option value="69" data-id="69">Ethiopia</option>
<option value="70" data-id="70">External Territories of Australia</option>
<option value="71" data-id="71">Falkland Islands</option>
<option value="72" data-id="72">Faroe Islands</option>
<option value="73" data-id="73">Fiji Islands</option>
<option value="74" data-id="74">Finland</option>
<option value="75" data-id="75">France</option>
<option value="76" data-id="76">French Guiana</option>
<option value="77" data-id="77">French Polynesia</option>
<option value="78" data-id="78">French Southern Territories</option>
<option value="79" data-id="79">Gabon</option>
<option value="80" data-id="80">Gambia The</option>
<option value="81" data-id="81">Georgia</option>
<option value="82" data-id="82">Germany</option>
<option value="83" data-id="83">Ghana</option>
<option value="84" data-id="84">Gibraltar</option>
<option value="85" data-id="85">Greece</option>
<option value="86" data-id="86">Greenland</option>
<option value="87" data-id="87">Grenada</option>
<option value="88" data-id="88">Guadeloupe</option>
<option value="89" data-id="89">Guam</option>
<option value="90" data-id="90">Guatemala</option>
<option value="91" data-id="91">Guernsey and Alderney</option>
<option value="92" data-id="92">Guinea</option>
<option value="93" data-id="93">Guinea-Bissau</option>
<option value="94" data-id="94">Guyana</option>
<option value="95" data-id="95">Haiti</option>
<option value="96" data-id="96">Heard and McDonald Islands</option>
<option value="97" data-id="97">Honduras</option>
<option value="98" data-id="98">Hong Kong S.A.R.</option>
<option value="99" data-id="99">Hungary</option>
<option value="100" data-id="100">Iceland</option>
<option value="101" data-id="101">India</option>
<option value="102" data-id="102">Indonesia</option>
<option value="103" data-id="103">Iran</option>
<option value="104" data-id="104">Iraq</option>
<option value="105" data-id="105">Ireland</option>
<option value="106" data-id="106">Israel</option>
<option value="107" data-id="107">Italy</option>
<option value="108" data-id="108">Jamaica</option>
<option value="109" data-id="109">Japan</option>
<option value="110" data-id="110">Jersey</option>
<option value="111" data-id="111">Jordan</option>
<option value="112" data-id="112">Kazakhstan</option>
<option value="113" data-id="113">Kenya</option>
<option value="114" data-id="114">Kiribati</option>
<option value="115" data-id="115">Korea North</option>
<option value="116" data-id="116">Korea South</option>
<option value="117" data-id="117">Kuwait</option>
<option value="118" data-id="118">Kyrgyzstan</option>
<option value="119" data-id="119">Laos</option>
<option value="120" data-id="120">Latvia</option>
<option value="121" data-id="121">Lebanon</option>
<option value="122" data-id="122">Lesotho</option>
<option value="123" data-id="123">Liberia</option>
<option value="124" data-id="124">Libya</option>
<option value="125" data-id="125">Liechtenstein</option>
<option value="126" data-id="126">Lithuania</option>
<option value="127" data-id="127">Luxembourg</option>
<option value="128" data-id="128">Macau S.A.R.</option>
<option value="129" data-id="129">Macedonia</option>
<option value="130" data-id="130">Madagascar</option>
<option value="131" data-id="131">Malawi</option>
<option value="132" data-id="132">Malaysia</option>
<option value="133" data-id="133">Maldives</option>
<option value="134" data-id="134">Mali</option>
<option value="135" data-id="135">Malta</option>
<option value="136" data-id="136">Man (Isle of)</option>
<option value="137" data-id="137">Marshall Islands</option>
<option value="138" data-id="138">Martinique</option>
<option value="139" data-id="139">Mauritania</option>
<option value="140" data-id="140">Mauritius</option>
<option value="141" data-id="141">Mayotte</option>
<option value="142" data-id="142">Mexico</option>
<option value="143" data-id="143">Micronesia</option>
<option value="144" data-id="144">Moldova</option>
<option value="145" data-id="145">Monaco</option>
<option value="146" data-id="146">Mongolia</option>
<option value="147" data-id="147">Montserrat</option>
<option value="148" data-id="148">Morocco</option>
<option value="149" data-id="149">Mozambique</option>
<option value="150" data-id="150">Myanmar</option>
<option value="151" data-id="151">Namibia</option>
<option value="152" data-id="152">Nauru</option>
<option value="153" data-id="153">Nepal</option>
<option value="154" data-id="154">Netherlands Antilles</option>
<option value="155" data-id="155">Netherlands The</option>
<option value="156" data-id="156">New Caledonia</option>
<option value="157" data-id="157">New Zealand</option>
<option value="158" data-id="158">Nicaragua</option>
<option value="159" data-id="159">Niger</option>
<option value="160" data-id="160">Nigeria</option>
<option value="161" data-id="161">Niue</option>
<option value="162" data-id="162">Norfolk Island</option>
<option value="163" data-id="163">Northern Mariana Islands</option>
<option value="164" data-id="164">Norway</option>
<option value="165" data-id="165">Oman</option>
<option value="166" data-id="166">Pakistan</option>
<option value="167" data-id="167">Palau</option>
<option value="168" data-id="168">Palestinian Territory Occupied</option>
<option value="169" data-id="169">Panama</option>
<option value="170" data-id="170">Papua new Guinea</option>
<option value="171" data-id="171">Paraguay</option>
<option value="172" data-id="172">Peru</option>
<option value="173" data-id="173">Philippines</option>
<option value="174" data-id="174">Pitcairn Island</option>
<option value="175" data-id="175">Poland</option>
<option value="176" data-id="176">Portugal</option>
<option value="177" data-id="177">Puerto Rico</option>
<option value="178" data-id="178">Qatar</option>
<option value="179" data-id="179">Reunion</option>
<option value="180" data-id="180">Romania</option>
<option value="181" data-id="181">Russia</option>
<option value="182" data-id="182">Rwanda</option>
<option value="183" data-id="183">Saint Helena</option>
<option value="184" data-id="184">Saint Kitts And Nevis</option>
<option value="185" data-id="185">Saint Lucia</option>
<option value="186" data-id="186">Saint Pierre and Miquelon</option>
<option value="187" data-id="187">Saint Vincent And The Grenadines</option>
<option value="188" data-id="188">Samoa</option>
<option value="189" data-id="189">San Marino</option>
<option value="190" data-id="190">Sao Tome and Principe</option>
<option value="191" data-id="191">Saudi Arabia</option>
<option value="192" data-id="192">Senegal</option>
<option value="193" data-id="193">Serbia</option>
<option value="194" data-id="194">Seychelles</option>
<option value="195" data-id="195">Sierra Leone</option>
<option value="196" data-id="196">Singapore</option>
<option value="197" data-id="197">Slovakia</option>
<option value="198" data-id="198">Slovenia</option>
<option value="199" data-id="199">Smaller Territories of the UK</option>
<option value="200" data-id="200">Solomon Islands</option>
<option value="201" data-id="201">Somalia</option>
<option value="202" data-id="202">South Africa</option>
<option value="203" data-id="203">South Georgia</option>
<option value="204" data-id="204">South Sudan</option>
<option value="205" data-id="205">Spain</option>
<option value="206" data-id="206">Sri Lanka</option>
<option value="207" data-id="207">Sudan</option>
<option value="208" data-id="208">Suriname</option>
<option value="209" data-id="209">Svalbard And Jan Mayen Islands</option>
<option value="210" data-id="210">Swaziland</option>
<option value="211" data-id="211">Sweden</option>
<option value="212" data-id="212">Switzerland</option>
<option value="213" data-id="213">Syria</option>
<option value="214" data-id="214">Taiwan</option>
<option value="215" data-id="215">Tajikistan</option>
<option value="216" data-id="216">Tanzania</option>
<option value="217" data-id="217">Thailand</option>
<option value="218" data-id="218">Togo</option>
<option value="219" data-id="219">Tokelau</option>
<option value="220" data-id="220">Tonga</option>
<option value="221" data-id="221">Trinidad And Tobago</option>
<option value="222" data-id="222">Tunisia</option>
<option value="223" data-id="223">Turkey</option>
<option value="224" data-id="224">Turkmenistan</option>
<option value="225" data-id="225">Turks And Caicos Islands</option>
<option value="226" data-id="226">Tuvalu</option>
<option value="227" data-id="227">Uganda</option>
<option value="228" data-id="228">Ukraine</option>
<option value="229" data-id="229">United Arab Emirates</option>
<option value="230" data-id="230">United Kingdom</option>
<option value="231" data-id="231">United States</option>
<option value="232" data-id="232">United States Minor Outlying Islands</option>
<option value="233" data-id="233">Uruguay</option>
<option value="234" data-id="234">Uzbekistan</option>
<option value="235" data-id="235">Vanuatu</option>
<option value="236" data-id="236">Vatican City State (Holy See)</option>
<option value="237" data-id="237">Venezuela</option>
<option value="238" data-id="238">Vietnam</option>
<option value="239" data-id="239">Virgin Islands (British)</option>
<option value="240" data-id="240">Virgin Islands (US)</option>
<option value="241" data-id="241">Wallis And Futuna Islands</option>
<option value="242" data-id="242">Western Sahara</option>
<option value="243" data-id="243">Yemen</option>
<option value="244" data-id="244">Yugoslavia</option>
<option value="245" data-id="245">Zambia</option>
<option value="246" data-id="246">Zimbabwe</option>
</select>
</div>
<div class="col-md-2 mar0-select">
<select name="state_id" id="state" class="form-control select2" style="width:100%;" required="">
<option value="" selected="" disabled="">-- No States --</option>
</select>
</div>
<div class="col">
<input type="text" id="search-text" class="form-control" placeholder="search Monetessori">
</div>
<button class="btn btn-submit">Search</button>
</div>
</form>
</div>
我想要做的是当我点击任何标签时，我想获得data-id的ID。并将data-categoryid属性添加到＃search-form div。当我点击任何标签时，我会获得ID，data-categoryid属性会添加到#search-form并带有ID。现在当我console.log($(this).data('categoryid'))获得总是相同的值时，问题是什么。当我检查到我的浏览器时，我发现＃search-form div已经改变了data-categoryid值，并且在脚本中的console.log($(this).data('categoryid'))时没有显示。
答案 0 :(得分：0)
更改/更新data()的正确方法是
$("#search-form").data( 'categoryid',category_id );
文档：https://api.jquery.com/data/
.data()方法允许我们以一种不受循环引用和内存泄漏的方式将任何类型的数据附加到DOM元素。